master
mahdi 3 years ago
parent 0d664a559d
commit e70ea0b768
  1. 31
      src/components/ReactTable3/BasicTable.js

@ -38,6 +38,9 @@ const BasicTable = () => {
pageCount,
setPageSize,
prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows,
state,
setGlobalFilter,
@ -47,6 +50,7 @@ const BasicTable = () => {
data,
// initialState: { pageIndex: 2 }
},
useColumnOrder,
useFilters,
useGlobalFilter,
useSortBy,
@ -70,13 +74,40 @@ const BasicTable = () => {
}
);
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>
<div>
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<button onClick={changeOrder}> Change Column Order </button>
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"

Loading…
Cancel
Save