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.
359 lines
10 KiB
359 lines
10 KiB
import React, { useMemo, useState } from "react"; |
|
|
|
import TabBar from "../ReactTable3/TabBar"; |
|
|
|
import Tabbar from "./Tabbar"; |
|
import MOCK_DATA from "./MOCK_DATA.json"; |
|
|
|
import { ColumnSearch } from "./ColumnSearch"; |
|
import { GlobalFilter } from "./GlobalFilter"; |
|
|
|
import { COLUMNS } from "./columns"; |
|
import { Pagination } from "./Pagination"; |
|
import { GoToPage } from "./GoToPage"; |
|
import ShowMoreRows from "./ShowMoreRows"; |
|
import { Settings } from "./Settings"; |
|
import { Checkbox } from "./Checkbox"; |
|
|
|
import RenderRowSubComponent from "./RenderRowSubComponent"; |
|
import EditRow from "./EditRow"; |
|
|
|
import { |
|
useTable, |
|
useSortBy, |
|
useGlobalFilter, |
|
useFilters, |
|
usePagination, |
|
useRowSelect, |
|
useColumnOrder, |
|
useExpanded, |
|
} from "react-table"; |
|
|
|
const BasicTable = ({ |
|
settingsIcon, |
|
addTab, |
|
tabs, |
|
delTab, |
|
setActivateTab, |
|
activeTab, |
|
}) => { |
|
const data = useMemo(() => MOCK_DATA, []); |
|
// console.log(data); |
|
|
|
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 columns = React.useMemo( |
|
() => COLUMNS({ filtering, setFiltering, addTab }), |
|
[] |
|
); |
|
|
|
// const defaultColumn = { |
|
// Cell: EditableCell, |
|
// }; |
|
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم |
|
const defaultColumn = useMemo(() => { |
|
return { |
|
Filter: ColumnSearch, |
|
}; |
|
}, []); |
|
|
|
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند |
|
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, |
|
}, |
|
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; |
|
|
|
return ( |
|
<> |
|
<div className="flex flex-row items-center justify-between"> |
|
{/* right box */} |
|
<di className="bg-red-400"> |
|
<Tabbar |
|
tabs={tabs} |
|
delTab={delTab} |
|
setActivateTab={setActivateTab} |
|
activeTab={activeTab} |
|
/> |
|
</di> |
|
{/* <div className=""> |
|
<Tabbar |
|
tabs={tabs} |
|
delTab={delTab} |
|
setActivateTab={setActivateTab} |
|
activeTab={activeTab} |
|
/> |
|
</div> */} |
|
{/* left box */} |
|
{activeTab == 0 ? ( |
|
<div |
|
className="flex flex-row items-center p-2 rounded-tl rounded-tr" |
|
style={{ backgroundColor: "#F1F6FF" }} |
|
> |
|
{/* search box */} |
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
{/* pagination */} |
|
<div |
|
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} |
|
/> |
|
)} |
|
</div> |
|
) : null} |
|
</div> |
|
{/* table */} |
|
{activeTab == 0 ? ( |
|
<> |
|
<table |
|
{...getTableProps()} |
|
className="min-w-full divide-y divide-gray-200 mb-5" |
|
> |
|
<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" |
|
className="cursor-pointer py-2 px-4 text-right text-xs font-medium" |
|
style={{ color: "#3287B9" }} |
|
> |
|
{column.render("Header")} |
|
<span> |
|
{column.isSorted |
|
? column.isSortedDesc |
|
? " 🔽" |
|
: " 🔼" |
|
: ""} |
|
</span> |
|
</th> |
|
))} |
|
</tr> |
|
))} |
|
</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 |
|
{...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({ |
|
row: row.original, |
|
columns, |
|
addTab, |
|
})} */} |
|
{/* {RenderRowSubComponent({ row: row.values })} */} |
|
<RenderRowSubComponent |
|
columns={columns} |
|
addTab={addTab} |
|
row={row.original} |
|
/> |
|
{console.log(row.original)} |
|
</td> |
|
</tr> |
|
) : null} |
|
</React.Fragment> |
|
); |
|
})} |
|
</tbody> |
|
<tfoot |
|
className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`} |
|
> |
|
{footerGroups.map((footerGroup, index) => ( |
|
<tr key={index} {...footerGroup.getFooterGroupProps()}> |
|
{footerGroup.headers.map((column, index) => ( |
|
<td |
|
key={index} |
|
{...column.getFooterProps} |
|
className="py-2 px-4 text-right text-xs font-medium" |
|
style={{ color: "#fff" }} |
|
> |
|
{column.render("Footer")} |
|
</td> |
|
))} |
|
</tr> |
|
))} |
|
</tfoot> |
|
</table> |
|
{/* bottom table */} |
|
<GoToPage |
|
pageIndex={pageIndex} |
|
gotoPage={gotoPage} |
|
pageOptions={pageOptions} |
|
/> |
|
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} /> |
|
</> |
|
) : ( |
|
<EditRow |
|
row={ |
|
rows.find((e) => e.original && +e.original.id === activeTab) |
|
?.original || {} |
|
} |
|
columns={defaultColumn} |
|
/> |
|
)} |
|
{/* <pre> |
|
<code> |
|
{JSON.stringify( |
|
{ |
|
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
|
}, |
|
null, |
|
2 |
|
)} |
|
</code> |
|
</pre> */} |
|
</> |
|
); |
|
}; |
|
|
|
export default BasicTable; |
|
|
|
BasicTable.defaultProps = { |
|
settingsIcon: true, |
|
};
|
|
|