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.
360 lines
10 KiB
360 lines
10 KiB
3 years ago
|
import React, { useMemo, useState } from "react";
|
||
3 years ago
|
|
||
3 years ago
|
import TabBar from "../ReactTable3/TabBar";
|
||
|
|
||
3 years ago
|
import Tabbar from "./Tabbar";
|
||
3 years ago
|
import MOCK_DATA from "./MOCK_DATA.json";
|
||
|
|
||
|
import { ColumnSearch } from "./ColumnSearch";
|
||
|
import { GlobalFilter } from "./GlobalFilter";
|
||
|
|
||
3 years ago
|
import { COLUMNS } from "./columns";
|
||
3 years ago
|
import { Pagination } from "./Pagination";
|
||
|
import { GoToPage } from "./GoToPage";
|
||
3 years ago
|
import ShowMoreRows from "./ShowMoreRows";
|
||
3 years ago
|
import { Settings } from "./Settings";
|
||
|
import { Checkbox } from "./Checkbox";
|
||
3 years ago
|
|
||
3 years ago
|
import RenderRowSubComponent from "./RenderRowSubComponent";
|
||
3 years ago
|
import EditRow from "./EditRow";
|
||
3 years ago
|
|
||
3 years ago
|
import {
|
||
|
useTable,
|
||
|
useSortBy,
|
||
|
useGlobalFilter,
|
||
|
useFilters,
|
||
|
usePagination,
|
||
|
useRowSelect,
|
||
|
useColumnOrder,
|
||
|
useExpanded,
|
||
|
} from "react-table";
|
||
|
|
||
3 years ago
|
const BasicTable = ({
|
||
|
settingsIcon,
|
||
|
addTab,
|
||
|
tabs,
|
||
|
delTab,
|
||
|
setActivateTab,
|
||
|
activeTab,
|
||
|
}) => {
|
||
3 years ago
|
const data = useMemo(() => MOCK_DATA, []);
|
||
3 years ago
|
// console.log(data);
|
||
3 years ago
|
|
||
3 years ago
|
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} />;
|
||
|
};
|
||
|
|
||
3 years ago
|
const [filtering, setFiltering] = useState(false);
|
||
3 years ago
|
|
||
3 years ago
|
const columns = React.useMemo(
|
||
|
() => COLUMNS({ filtering, setFiltering, addTab }),
|
||
|
[]
|
||
|
);
|
||
3 years ago
|
|
||
3 years ago
|
// const defaultColumn = {
|
||
|
// Cell: EditableCell,
|
||
|
// };
|
||
3 years ago
|
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
|
||
3 years ago
|
const defaultColumn = useMemo(() => {
|
||
|
return {
|
||
|
Filter: ColumnSearch,
|
||
|
};
|
||
|
}, []);
|
||
3 years ago
|
|
||
3 years ago
|
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
|
||
|
const isEven = (idx) => idx % 2 === 0;
|
||
|
|
||
|
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,
|
||
3 years ago
|
defaultColumn,
|
||
3 years ago
|
},
|
||
|
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;
|
||
3 years ago
|
|
||
3 years ago
|
return (
|
||
|
<>
|
||
3 years ago
|
<div className="flex flex-row items-center justify-between">
|
||
|
{/* right box */}
|
||
3 years ago
|
<di className="bg-red-400">
|
||
|
<Tabbar
|
||
|
tabs={tabs}
|
||
|
delTab={delTab}
|
||
|
setActivateTab={setActivateTab}
|
||
|
activeTab={activeTab}
|
||
|
/>
|
||
|
</di>
|
||
|
{/* <div className="">
|
||
3 years ago
|
<Tabbar
|
||
|
tabs={tabs}
|
||
|
delTab={delTab}
|
||
|
setActivateTab={setActivateTab}
|
||
|
activeTab={activeTab}
|
||
|
/>
|
||
3 years ago
|
</div> */}
|
||
3 years ago
|
{/* left box */}
|
||
3 years ago
|
{activeTab == 0 ? (
|
||
3 years ago
|
<div
|
||
3 years ago
|
className="flex flex-row items-center p-2 rounded-tl rounded-tr"
|
||
3 years ago
|
style={{ backgroundColor: "#F1F6FF" }}
|
||
3 years ago
|
>
|
||
3 years ago
|
{/* search box */}
|
||
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
|
||
|
{/* pagination */}
|
||
3 years ago
|
<div
|
||
3 years ago
|
className="flex flex-row items-center p-1 rounded"
|
||
|
style={{ backgroundColor: "#F9FBFF" }}
|
||
|
>
|
||
|
{/* go to page */}
|
||
|
<GoToPage
|
||
|
pageIndex={pageIndex}
|
||
|
gotoPage={gotoPage}
|
||
|
pageOptions={pageOptions}
|
||
|
/>
|
||
|
{/* vertical line */}
|
||
|
<div
|
||
|
className={`w-0.5 h-4 mr-2`}
|
||
|
style={{ backgroundColor: "#65A9FF" }}
|
||
|
></div>
|
||
|
{/* arrows */}
|
||
|
<Pagination
|
||
|
gotoPage={gotoPage}
|
||
|
canPreviousPage={canPreviousPage}
|
||
|
previousPage={previousPage}
|
||
|
canNextPage={canNextPage}
|
||
|
pageCount={pageCount}
|
||
|
nextPage={nextPage}
|
||
|
/>
|
||
|
</div>
|
||
|
{/* settings icon */}
|
||
3 years ago
|
{settingsIcon && (
|
||
|
<Settings
|
||
|
allColumns={allColumns}
|
||
|
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
|
||
|
/>
|
||
|
)}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
) : null}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
{/* table */}
|
||
3 years ago
|
{activeTab == 0 ? (
|
||
|
<>
|
||
|
<table
|
||
|
{...getTableProps()}
|
||
3 years ago
|
className="min-w-full divide-y divide-gray-200 mb-5"
|
||
3 years ago
|
>
|
||
|
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
|
||
|
{headerGroups.map((headerGroup, index) => (
|
||
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
|
||
|
{headerGroup.headers.map((column) => (
|
||
|
<th
|
||
|
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||
|
scope="col"
|
||
3 years ago
|
className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
|
||
3 years ago
|
style={{ color: "#3287B9" }}
|
||
|
>
|
||
|
{column.render("Header")}
|
||
|
<span>
|
||
|
{column.isSorted
|
||
|
? column.isSortedDesc
|
||
|
? " 🔽"
|
||
|
: " 🔼"
|
||
|
: ""}
|
||
|
</span>
|
||
|
</th>
|
||
|
))}
|
||
3 years ago
|
</tr>
|
||
3 years ago
|
))}
|
||
|
</thead>
|
||
|
{/* filter row */}
|
||
|
{filtering && (
|
||
3 years ago
|
<thead style={{ backgroundColor: "#F1F5FE" }}>
|
||
3 years ago
|
{headerGroups.map((headerGroup, index) => (
|
||
|
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
|
||
|
{headerGroup.headers.map((column) => (
|
||
3 years ago
|
<th
|
||
|
{...column.getHeaderProps()}
|
||
|
className="py-2 px-4 text-sm"
|
||
|
>
|
||
3 years ago
|
{column.canFilter ? column.render("Filter") : null}
|
||
|
</th>
|
||
|
))}
|
||
3 years ago
|
</tr>
|
||
3 years ago
|
))}
|
||
|
</thead>
|
||
|
)}
|
||
|
<tbody
|
||
|
{...getTableBodyProps()}
|
||
|
className="divide-y divide-gray-200 bg-white"
|
||
|
>
|
||
|
{page.map((row, idx) => {
|
||
|
prepareRow(row);
|
||
|
return (
|
||
|
<React.Fragment key={idx}>
|
||
|
<tr
|
||
|
{...row.getRowProps()}
|
||
|
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
|
||
|
>
|
||
|
{row.cells.map((cell, index) => {
|
||
|
return (
|
||
|
<td
|
||
|
key={index}
|
||
|
{...cell.getCellProps()}
|
||
|
className="p-4 whitespace-nowrap text-xs"
|
||
|
role="cell"
|
||
|
style={{ color: "#00253A" }}
|
||
|
>
|
||
|
{cell.render("Cell")}
|
||
|
</td>
|
||
|
);
|
||
|
})}
|
||
|
</tr>
|
||
|
{row.isExpanded ? (
|
||
|
<tr>
|
||
|
<td colSpan={headerGroups[0].headers.length}>
|
||
3 years ago
|
{/* {RenderRowSubComponent({
|
||
3 years ago
|
row: row.original,
|
||
|
columns,
|
||
3 years ago
|
addTab,
|
||
|
})} */}
|
||
3 years ago
|
{/* {RenderRowSubComponent({ row: row.values })} */}
|
||
3 years ago
|
<RenderRowSubComponent
|
||
|
columns={columns}
|
||
|
addTab={addTab}
|
||
|
row={row.original}
|
||
|
/>
|
||
3 years ago
|
{console.log(row.original)}
|
||
3 years ago
|
</td>
|
||
|
</tr>
|
||
|
) : null}
|
||
|
</React.Fragment>
|
||
|
);
|
||
|
})}
|
||
|
</tbody>
|
||
|
<tfoot
|
||
3 years ago
|
className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`}
|
||
3 years ago
|
>
|
||
|
{footerGroups.map((footerGroup, index) => (
|
||
|
<tr key={index} {...footerGroup.getFooterGroupProps()}>
|
||
|
{footerGroup.headers.map((column, index) => (
|
||
|
<td
|
||
|
key={index}
|
||
|
{...column.getFooterProps}
|
||
3 years ago
|
className="py-2 px-4 text-right text-xs font-medium"
|
||
3 years ago
|
style={{ color: "#fff" }}
|
||
|
>
|
||
|
{column.render("Footer")}
|
||
|
</td>
|
||
|
))}
|
||
|
</tr>
|
||
|
))}
|
||
|
</tfoot>
|
||
|
</table>
|
||
3 years ago
|
{/* bottom table */}
|
||
|
<GoToPage
|
||
|
pageIndex={pageIndex}
|
||
|
gotoPage={gotoPage}
|
||
|
pageOptions={pageOptions}
|
||
|
/>
|
||
|
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
|
||
3 years ago
|
</>
|
||
|
) : (
|
||
|
<EditRow
|
||
|
row={
|
||
|
rows.find((e) => e.original && +e.original.id === activeTab)
|
||
|
?.original || {}
|
||
|
}
|
||
3 years ago
|
columns={defaultColumn}
|
||
3 years ago
|
/>
|
||
|
)}
|
||
|
{/* <pre>
|
||
3 years ago
|
<code>
|
||
|
{JSON.stringify(
|
||
|
{
|
||
|
selectedFlatRows: selectedFlatRows.map((row) => row.original),
|
||
|
},
|
||
|
null,
|
||
|
2
|
||
|
)}
|
||
|
</code>
|
||
3 years ago
|
</pre> */}
|
||
3 years ago
|
</>
|
||
|
);
|
||
|
};
|
||
3 years ago
|
|
||
3 years ago
|
export default BasicTable;
|
||
3 years ago
|
|
||
|
BasicTable.defaultProps = {
|
||
3 years ago
|
settingsIcon: true,
|
||
3 years ago
|
};
|