parent
61405cb4ed
commit
ec4db56170
7 changed files with 41 additions and 453 deletions
@ -1,52 +1,21 @@ |
|||||||
[ |
[ |
||||||
{ |
{ |
||||||
"name": "سامسونگ موبایل مدل 1", |
"name": "خسرو سهرابی", |
||||||
"order-date": "1399/09/27", |
"order-date": "1400/11/09", |
||||||
"order-price": 25, |
"order-price": 910.325, |
||||||
"order-number": "09120023100", |
"order-number": "09120023100", |
||||||
"user-job": "مهندس ساختمان", |
"user-job": "مهندس ساختمان", |
||||||
"order-status": 1, |
"order-status": 1, |
||||||
"order-level": 1, |
"order-level": 1, |
||||||
"history": "مهدی" |
"birth_place": "استان تهران شهر تهران", |
||||||
}, |
"office_phone": "02144407010", |
||||||
{ |
"education": "کارشناسی", |
||||||
"name": "ایفون جدید 13", |
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق", |
||||||
"order-date": "1305/09/27", |
"job": "فروشنده لوازم خانگی", |
||||||
"order-price": 22, |
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", |
||||||
"order-number": "09120023100", |
"field_study": "مدیریت صنعتی", |
||||||
"user-job": "مهندس ساختمان", |
"birth_day": "1368/09/02", |
||||||
"order-status": 2, |
"Criminal record": "4 سال حبس", |
||||||
"order-level": 2, |
"uni": "تهران" |
||||||
"history": "tggg" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "مک بوک پرو", |
|
||||||
"order-date": "1399/09/27", |
|
||||||
"order-price": 75, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 3, |
|
||||||
"order-level": 3, |
|
||||||
"history": "aaa" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "تبلت", |
|
||||||
"order-date": "1305/09/27", |
|
||||||
"order-price": 44, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "مهندس ساختمان", |
|
||||||
"order-status": 4, |
|
||||||
"order-level": 4, |
|
||||||
"history": "ff" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"name": "کتاب جدید", |
|
||||||
"order-date": "1305/09/27", |
|
||||||
"order-price": 13, |
|
||||||
"order-number": "09120023100", |
|
||||||
"user-job": "طناز", |
|
||||||
"order-status": 5, |
|
||||||
"order-level": 5, |
|
||||||
"history": "sfda" |
|
||||||
} |
} |
||||||
] |
] |
||||||
|
|||||||
@ -1,302 +0,0 @@ |
|||||||
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; |
|
||||||
Loading…
Reference in new issue