parent
c1b186927c
commit
290eef8bb9
3 changed files with 409 additions and 68 deletions
@ -0,0 +1,302 @@ |
|||||||
|
import React, { useMemo } from "react"; |
||||||
|
|
||||||
|
import { |
||||||
|
useTable, |
||||||
|
useSortBy, |
||||||
|
useGlobalFilter, |
||||||
|
useFilters, |
||||||
|
usePagination, |
||||||
|
useRowSelect, |
||||||
|
useColumnOrder, |
||||||
|
} from "react-table"; |
||||||
|
|
||||||
|
import { COLUMNS } from "./columns"; |
||||||
|
|
||||||
|
import { GlobalFilter } from "./GlobalFilter"; |
||||||
|
|
||||||
|
import { Checkbox } from "./Checkbox"; |
||||||
|
|
||||||
|
import MOCK_DATA from "./MOCK_DATA.json"; |
||||||
|
|
||||||
|
const BasicTable = () => { |
||||||
|
const columns = React.useMemo(() => COLUMNS, []); |
||||||
|
const data = useMemo(() => MOCK_DATA, []); |
||||||
|
|
||||||
|
const { |
||||||
|
getTableProps, |
||||||
|
getTableBodyProps, |
||||||
|
headerGroups, |
||||||
|
footerGroups, |
||||||
|
rows, |
||||||
|
page, |
||||||
|
nextPage, |
||||||
|
previousPage, |
||||||
|
canNextPage, |
||||||
|
canPreviousPage, |
||||||
|
pageOptions, |
||||||
|
gotoPage, |
||||||
|
pageCount, |
||||||
|
setPageSize, |
||||||
|
prepareRow, |
||||||
|
allColumns, |
||||||
|
getToggleHideAllColumnsProps, |
||||||
|
setColumnOrder, |
||||||
|
selectedFlatRows, |
||||||
|
state, |
||||||
|
setGlobalFilter, |
||||||
|
} = useTable( |
||||||
|
{ |
||||||
|
columns, |
||||||
|
data, |
||||||
|
// initialState: { pageIndex: 2 }
|
||||||
|
}, |
||||||
|
useColumnOrder, |
||||||
|
useFilters, |
||||||
|
useGlobalFilter, |
||||||
|
useSortBy, |
||||||
|
usePagination, |
||||||
|
useRowSelect, |
||||||
|
(hooks) => { |
||||||
|
hooks.visibleColumns.push((columns) => { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
id: "selection", |
||||||
|
Header: ({ getToggleAllRowsSelectedProps }) => ( |
||||||
|
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
||||||
|
), |
||||||
|
Cell: ({ row }) => ( |
||||||
|
<Checkbox {...row.getToggleRowSelectedProps()} /> |
||||||
|
), |
||||||
|
}, |
||||||
|
...columns, |
||||||
|
]; |
||||||
|
}); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
const changeOrder = () => { |
||||||
|
setColumnOrder([ |
||||||
|
"name", |
||||||
|
"order-number", |
||||||
|
"user-job", |
||||||
|
"order-level", |
||||||
|
"order-status", |
||||||
|
"order-price", |
||||||
|
]); |
||||||
|
}; |
||||||
|
|
||||||
|
const { globalFilter, pageIndex, pageSize } = state; |
||||||
|
// const firstPageRows = rows.slice(0, 10);
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="bg-yellow-500"> |
||||||
|
{/* search box */} |
||||||
|
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
||||||
|
{/* pagination */} |
||||||
|
</div> |
||||||
|
{/* toggle columns */} |
||||||
|
{/* <div> |
||||||
|
<div> |
||||||
|
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All |
||||||
|
</div> |
||||||
|
{allColumns.map((column) => ( |
||||||
|
<div key={column.id}> |
||||||
|
<label> |
||||||
|
<input type="checkbox" {...column.getToggleHiddenProps()} /> |
||||||
|
{column.Header} |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> */} |
||||||
|
|
||||||
|
{/* Change Column Order */} |
||||||
|
{/* <button onClick={changeOrder}> Change Column Order </button> */} |
||||||
|
|
||||||
|
<table |
||||||
|
{...getTableProps()} |
||||||
|
className="min-w-full divide-y divide-gray-200" |
||||||
|
> |
||||||
|
<thead className="bg-gray-300"> |
||||||
|
{headerGroups.map((headerGroup) => ( |
||||||
|
<tr {...headerGroup.getHeaderGroupProps()}> |
||||||
|
{headerGroup.headers.map((column) => ( |
||||||
|
<th |
||||||
|
{...column.getHeaderProps(column.getSortByToggleProps())} |
||||||
|
scope="col" |
||||||
|
className="cursor-pointer px-4 py-2 text-right text-xs" |
||||||
|
style={{ color: "#3287B9" }} |
||||||
|
> |
||||||
|
{column.render("Header")} |
||||||
|
<span> |
||||||
|
{column.isSorted |
||||||
|
? column.isSortedDesc |
||||||
|
? " 🔽" |
||||||
|
: " 🔼" |
||||||
|
: ""} |
||||||
|
</span> |
||||||
|
{/* not using */} |
||||||
|
{/* <div> |
||||||
|
{column.canFilter ? column.render('Filter') : null } |
||||||
|
</div> */} |
||||||
|
</th> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
))} |
||||||
|
</thead> |
||||||
|
|
||||||
|
<tbody |
||||||
|
{...getTableBodyProps()} |
||||||
|
className="bg-white divide-y divide-gray-200" |
||||||
|
> |
||||||
|
{/* not using */} |
||||||
|
{/* {rows.map((row) => { |
||||||
|
prepareRow(row) |
||||||
|
return( |
||||||
|
<tr {...row.getRowProps()}> |
||||||
|
{row.cells.map((cell) => { |
||||||
|
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}> |
||||||
|
{cell.render('Cell')} |
||||||
|
</td> |
||||||
|
})} |
||||||
|
</tr> |
||||||
|
) |
||||||
|
})} */} |
||||||
|
{page.map((row) => { |
||||||
|
prepareRow(row); |
||||||
|
return ( |
||||||
|
<tr {...row.getRowProps()}> |
||||||
|
{row.cells.map((cell) => { |
||||||
|
return ( |
||||||
|
<td |
||||||
|
{...cell.getCellProps()} |
||||||
|
className="px-4 py-4 whitespace-nowrap text-sm" |
||||||
|
role="cell" |
||||||
|
style={{ color: "#00253A" }} |
||||||
|
> |
||||||
|
{cell.render("Cell")} |
||||||
|
</td> |
||||||
|
); |
||||||
|
})} |
||||||
|
</tr> |
||||||
|
); |
||||||
|
})} |
||||||
|
|
||||||
|
{/* not using */} |
||||||
|
{/* {firstPageRows.map((row) => { |
||||||
|
prepareRow(row); |
||||||
|
return ( |
||||||
|
<tr {...row.getRowProps()}> |
||||||
|
{row.cells.map((cell) => { |
||||||
|
return ( |
||||||
|
<td |
||||||
|
{...cell.getCellProps()} |
||||||
|
className="px-4 py-4 whitespace-nowrap text-sm" |
||||||
|
role="cell" |
||||||
|
style={{ color: "#00253A" }} |
||||||
|
> |
||||||
|
{cell.render("Cell")} |
||||||
|
</td> |
||||||
|
); |
||||||
|
})} |
||||||
|
</tr> |
||||||
|
); |
||||||
|
})} */} |
||||||
|
</tbody> |
||||||
|
|
||||||
|
<tfoot |
||||||
|
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`} |
||||||
|
> |
||||||
|
{footerGroups.map((footerGroup) => ( |
||||||
|
<tr {...footerGroup.getFooterGroupProps()}> |
||||||
|
{footerGroup.headers.map((column) => ( |
||||||
|
<td |
||||||
|
{...column.getFooterProps} |
||||||
|
className="px-4 py-2 text-right text-xs" |
||||||
|
style={{ color: "#3287B9" }} |
||||||
|
> |
||||||
|
{column.render("Footer")} |
||||||
|
</td> |
||||||
|
))} |
||||||
|
</tr> |
||||||
|
))} |
||||||
|
</tfoot> |
||||||
|
</table> |
||||||
|
|
||||||
|
<pre> |
||||||
|
<code> |
||||||
|
{JSON.stringify( |
||||||
|
{ |
||||||
|
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
||||||
|
}, |
||||||
|
null, |
||||||
|
2 |
||||||
|
)} |
||||||
|
</code> |
||||||
|
</pre> |
||||||
|
|
||||||
|
<div> |
||||||
|
<span> |
||||||
|
Page{" "} |
||||||
|
<strong> |
||||||
|
{pageIndex + 1} of {pageOptions.length} |
||||||
|
</strong> |
||||||
|
{""} |
||||||
|
</span> |
||||||
|
|
||||||
|
<span> |
||||||
|
| Go to Page:{" "} |
||||||
|
<input |
||||||
|
type="number" |
||||||
|
defaultValue={pageIndex + 1} |
||||||
|
onChange={(e) => { |
||||||
|
const pageNumber = e.target.value |
||||||
|
? Number(e.target.value) - 1 |
||||||
|
: 0; |
||||||
|
gotoPage(pageNumber); |
||||||
|
}} |
||||||
|
style={{ width: "50px" }} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
|
||||||
|
<select |
||||||
|
value={pageSize} |
||||||
|
onChange={(e) => setPageSize(Number(e.target.value))} |
||||||
|
> |
||||||
|
{[7, 10, 25, 50].map((pageSize) => ( |
||||||
|
<option key={pageSize} value={pageSize}> |
||||||
|
Show {pageSize} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
|
||||||
|
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> |
||||||
|
{" "} |
||||||
|
{"<<"}{" "} |
||||||
|
</button> |
||||||
|
|
||||||
|
<button |
||||||
|
className="bg-blue-400 m-2 rounded text-white p-2" |
||||||
|
onClick={() => previousPage()} |
||||||
|
disabled={!canPreviousPage} |
||||||
|
> |
||||||
|
Previous |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="bg-blue-400 m-2 rounded text-white p-2" |
||||||
|
onClick={() => nextPage()} |
||||||
|
disabled={!canNextPage} |
||||||
|
> |
||||||
|
Next |
||||||
|
</button> |
||||||
|
|
||||||
|
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}> |
||||||
|
{" "} |
||||||
|
{">>"}{" "} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default BasicTable; |
||||||
@ -1,13 +1,73 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import BasicTable from "./BasicTable"; |
import BasicTable from "./BasicTable"; |
||||||
|
|
||||||
const ReactTable3 = () => { |
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { |
||||||
return ( |
return ( |
||||||
<div> |
<div className="my-10 w-11/12 mx-auto bg-indigo-200"> |
||||||
|
{/* breadCrumb */} |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
{breadCrumbs.map((breadCrumb, index) => ( |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<span |
||||||
|
className={`cursor-pointer text-xs hover:text-blue-900 ${ |
||||||
|
breadCrumb.active ? "text-blue-900" : "text-blue-400" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{breadCrumb.name} |
||||||
|
</span> |
||||||
|
{Number(index) !== breadCrumbs.length - 1 && ( |
||||||
|
<div |
||||||
|
className={`mx-2 ${ |
||||||
|
breadCrumb.active ? "text-blue-900" : "text-blue-400" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{" > "} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="my-7"> |
||||||
|
{/* page Title */} |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div> |
||||||
|
<h2 className="text-base text-blue-900">{title}</h2> |
||||||
|
</div> |
||||||
|
{/* page Title */} |
||||||
|
<div className="flex flex-row items-center mt-4"> |
||||||
|
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> |
||||||
|
<h2 className="text-sm">{subTitle}</h2> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
<BasicTable /> |
<BasicTable /> |
||||||
mahdi |
|
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default ReactTable3; |
export default ReactTable3; |
||||||
|
|
||||||
|
ReactTable3.defaultProps = { |
||||||
|
breadCrumbs: [ |
||||||
|
{ |
||||||
|
name: "صفحه اصلی", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "آمار و گزارشات", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "فروش محصولات", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "سال 1400", |
||||||
|
active: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
title: "میزان فروش محصولات", |
||||||
|
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", |
||||||
|
}; |
||||||
|
|||||||
Loading…
Reference in new issue