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

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";
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
import RenderRowSubComponent from "./RenderRowSubComponent";
3 years ago
import EditRow from "./EditRow";
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
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
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,
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> */}
{/* left box */}
3 years ago
{activeTab == 0 ? (
<div
className="flex flex-row items-center p-2 rounded-tl rounded-tr"
3 years ago
style={{ backgroundColor: "#F1F6FF" }}
>
3 years ago
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<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 */}
{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}>
{/* {RenderRowSubComponent({
3 years ago
row: row.original,
columns,
addTab,
})} */}
3 years ago
{/* {RenderRowSubComponent({ row: row.values })} */}
<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
export default BasicTable;
BasicTable.defaultProps = {
3 years ago
settingsIcon: true,
};