|
|
@ -34,10 +34,6 @@ import { |
|
|
|
} from "react-table"; |
|
|
|
} from "react-table"; |
|
|
|
import ButtonNewDesign from "../ButtonNewDesign"; |
|
|
|
import ButtonNewDesign from "../ButtonNewDesign"; |
|
|
|
|
|
|
|
|
|
|
|
export function CheckBox({}) { |
|
|
|
|
|
|
|
return <input type="checkbox" className="cursor-pointer" />; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const SelectColumnFilter = ({ |
|
|
|
export const SelectColumnFilter = ({ |
|
|
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
|
|
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
@ -109,33 +105,6 @@ const BasicTable = ({ |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const data = useMemo(() => MOCK_DATA2, []); |
|
|
|
const data = useMemo(() => MOCK_DATA2, []); |
|
|
|
// console.log(data);
|
|
|
|
// console.log(data);
|
|
|
|
// console.log(MOCK_DATA2);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 [filtering, setFiltering] = useState(false); |
|
|
|
const [filtering, setFiltering] = useState(false); |
|
|
|
|
|
|
|
|
|
|
@ -187,23 +156,6 @@ const BasicTable = ({ |
|
|
|
useExpanded, |
|
|
|
useExpanded, |
|
|
|
usePagination, |
|
|
|
usePagination, |
|
|
|
useRowSelect |
|
|
|
useRowSelect |
|
|
|
// (hooks) => {
|
|
|
|
|
|
|
|
// hooks.visibleColumns.push((columns) => {
|
|
|
|
|
|
|
|
// return [
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// id: "selection",
|
|
|
|
|
|
|
|
// className: "w-7",
|
|
|
|
|
|
|
|
// Header: ({ getToggleAllRowsSelectedProps }) => (
|
|
|
|
|
|
|
|
// <Checkbox {...getToggleAllRowsSelectedProps()} />
|
|
|
|
|
|
|
|
// ),
|
|
|
|
|
|
|
|
// Cell: ({ row }) => (
|
|
|
|
|
|
|
|
// <Checkbox {...row.getToggleRowSelectedProps()} />
|
|
|
|
|
|
|
|
// ),
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// ...columns,
|
|
|
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const { globalFilter, pageIndex, pageSize } = state; |
|
|
|
const { globalFilter, pageIndex, pageSize } = state; |
|
|
@ -212,6 +164,7 @@ const BasicTable = ({ |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="bg-white p-4 rounded"> |
|
|
|
<div className="bg-white p-4 rounded"> |
|
|
|
|
|
|
|
{/* {filtering && <section>TANNAZ</section>} */} |
|
|
|
{/* <div className="flex flex-row items-center"> |
|
|
|
{/* <div className="flex flex-row items-center"> |
|
|
|
{listView.map((list, i) => ( |
|
|
|
{listView.map((list, i) => ( |
|
|
|
<img |
|
|
|
<img |
|
|
@ -329,7 +282,7 @@ const BasicTable = ({ |
|
|
|
{/* table LIST */} |
|
|
|
{/* table LIST */} |
|
|
|
{activeTab == 0 ? ( |
|
|
|
{activeTab == 0 ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{activeList === true && ( |
|
|
|
{activeList === false && ( |
|
|
|
// table
|
|
|
|
// table
|
|
|
|
<table |
|
|
|
<table |
|
|
|
{...getTableProps()} |
|
|
|
{...getTableProps()} |
|
|
@ -362,23 +315,6 @@ const BasicTable = ({ |
|
|
|
))} |
|
|
|
))} |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
)} |
|
|
|
)} |
|
|
|
{/* filter row */} |
|
|
|
|
|
|
|
{filtering && ( |
|
|
|
|
|
|
|
<thead style={{ backgroundColor: "#F1F5FE" }}> |
|
|
|
|
|
|
|
{headerGroups.map((headerGroup, index) => ( |
|
|
|
|
|
|
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
|
|
|
|
|
|
|
{headerGroup.headers.map((column) => ( |
|
|
|
|
|
|
|
<th |
|
|
|
|
|
|
|
{...column.getHeaderProps()} |
|
|
|
|
|
|
|
className="py-2 px-4 text-sm" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{column.canFilter ? column.render("Filter") : null} |
|
|
|
|
|
|
|
</th> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</tr> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</thead> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
<tbody |
|
|
|
<tbody |
|
|
|
{...getTableBodyProps()} |
|
|
|
{...getTableBodyProps()} |
|
|
|
className="divide-y divide-gray-200" |
|
|
|
className="divide-y divide-gray-200" |
|
|
@ -445,7 +381,7 @@ const BasicTable = ({ |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
)} |
|
|
|
)} |
|
|
|
{/* GRID LIST */} |
|
|
|
{/* GRID LIST */} |
|
|
|
{activeList === false && ( |
|
|
|
{activeList === true && ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
{...getTableBodyProps()} |
|
|
|
{...getTableBodyProps()} |
|
|
|
className="flex flex-row flex-wrap gap-4 items-center justify-center" |
|
|
|
className="flex flex-row flex-wrap gap-4 items-center justify-center" |
|
|
|