You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

213 lines
4.9 KiB

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 <input value={value} onChange={onChange} onBlur={onBlur} />;
};
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 }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<Checkbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
];
});
}
);
const { globalFilter, pageIndex, pageSize } = state;
const acitvieTab = tabs?.find((e) => e.isActive) || {};
return (
<div className="w-full flex flex-col flex-1">
<Toolbar
setTabs={setTabs}
tabs={tabs}
fake={fake}
setFake={setFake}
activeOtherTab={activeOtherTab}
setActiveOtherTab={setActiveOtherTab}
setGlobalFilter={setGlobalFilter}
globalFilter={globalFilter}
pageIndex={pageIndex}
pageOptions={pageOptions}
gotoPage={gotoPage}
canPreviousPage={canPreviousPage}
previousPage={previousPage}
canNextPage={canNextPage}
pageCount={pageCount}
nextPage={nextPage}
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
name={name}
/>
{acitvieTab.element == "table" && (
<Main
getTableProps={getTableProps}
headerGroups={headerGroups}
prepareRow={prepareRow}
filtering={filtering}
setTabs={setTabs}
tabs={tabs}
fake={fake}
setFake={setFake}
activeOtherTab={activeOtherTab}
setActiveOtherTab={setActiveOtherTab}
columns={columns}
getTableBodyProps={getTableBodyProps}
page={page}
rows={rows}
footerGroups={footerGroups}
name={name}
schema={schema}
data={data}
/>
)}
{acitvieTab.element == "table" && (
<Footer
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
pageSize={pageSize}
setPageSize={setPageSize}
/>
)}
{acitvieTab.element == "editor" && (
<Editor
schema={schema}
data={acitvieTab.data}
add={add}
update={update}
/>
)}
{/* {acitvieTab.element == "viewer" && <Viewer />} */}
</div>
);
};
export default Table;