import React, { useState, useMemo } from "react";
import {
useTable,
useSortBy,
useGlobalFilter,
useFilters,
usePagination,
useRowSelect,
useColumnOrder,
useExpanded,
} from "react-table";
//components
// import Breadrumbs from "../Breadcrumbs";
import Toolbar from "./Layouts/Toolbar";
import Checkbox from "./components/Checkbox";
import { COLUMNS } from "./components/Columns";
import { ColumnSearch } from "../Table/components/ColumnSearch";
import Footer from "./Layouts/Footer";
import Main from "./Layouts/Main";
const Table = ({
data,
schema,
name,
Editor,
getData,
title,
tabs,
setTabs,
fake,
setFake,
activeOtherTab,
setActiveOtherTab,
add,
update,
}) => {
const [filtering, setFiltering] = useState(false);
const columns = useMemo(
() =>
COLUMNS({
schema: schema.filter((e) => !e?.more),
filtering,
setFiltering,
setTabs,
name,
tabs,
fake,
setFake,
activeOtherTab,
setActiveOtherTab,
}),
[filtering, schema]
);
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
// We need to keep and update the state of the cell normally
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateMyData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return ;
};
const defaultColumn = React.useMemo(() => {
return {
Filter: ColumnSearch,
};
}, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
resetResizing,
} = useTable(
{
columns,
data,
defaultColumn,
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => {
return [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (