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
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;
|
|
|