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 }) => ( ), Cell: ({ row }) => ( ), }, ...columns, ]; }); } ); const { globalFilter, pageIndex, pageSize } = state; const acitvieTab = tabs?.find((e) => e.isActive) || {}; return (
{acitvieTab.element == "table" && (
)} {acitvieTab.element == "table" && (
); }; export default Table;