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

@ -38,6 +38,9 @@ const BasicTable = () => {
pageCount, pageCount,
setPageSize, setPageSize,
prepareRow, prepareRow,
allColumns,
getToggleHideAllColumnsProps,
setColumnOrder,
selectedFlatRows, selectedFlatRows,
state, state,
setGlobalFilter, setGlobalFilter,
@ -47,6 +50,7 @@ const BasicTable = () => {
data, data,
// initialState: { pageIndex: 2 } // initialState: { pageIndex: 2 }
}, },
useColumnOrder,
useFilters, useFilters,
useGlobalFilter, useGlobalFilter,
useSortBy, 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 { globalFilter, pageIndex, pageSize } = state;
const firstPageRows = rows.slice(0, 10); const firstPageRows = rows.slice(0, 10);
return ( 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} /> <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<button onClick={changeOrder}> Change Column Order </button>
<table <table
{...getTableProps()} {...getTableProps()}
className="min-w-full divide-y divide-gray-200" className="min-w-full divide-y divide-gray-200"

Loading…
Cancel
Save