react-table#useGlobalFilter JavaScript Examples
The following examples show how to use
react-table#useGlobalFilter.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Table.js From CampaignFinance with MIT License | 5 votes |
|
export default function Table({
columns,
data,
onFetchData,
initialSortBy,
isLoading = false,
}) {
const defaultColumn = React.useMemo(
() => ({
disableFilters: true,
disableSortBy: true,
}),
[]
)
// Use the useTable Hook to send the columns and data to build the table
const {
getTableProps, // table props from react-table
getTableBodyProps, // table body props from react-table
headerGroups, // headerGroups, if your table has groupings
rows, // rows for the table based on the data passed
prepareRow, // Prepare the row (this function needs to be called for each row before getting the row props)
state: { sortBy, filters }, // track the current sort and filter state so we can call appropriate callbacks
} = useTable(
{
columns,
data,
defaultColumn,
initialState: initialSortBy ? { sortBy: initialSortBy } : undefined,
disableMultiSort: true,
manualSortBy: true,
manualFilters: true,
},
useFilters,
useGlobalFilter,
useSortBy
)
// 250ms debounce
const onFetchDataDebounced = useAsyncDebounce(onFetchData, 250)
useEffect(() => {
if (onFetchData) {
onFetchDataDebounced({ filters, sortBy })
}
}, [onFetchData, onFetchDataDebounced, filters, sortBy])
return (
<USTable bordered={true} fullWidth={true} {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
<div {...column.getSortByToggleProps()}>
{column.render('Header')}
{column.isSortedDesc === true && (
<img
src={SortDescending}
alt="Descending"
style={{
verticalAlign: 'middle',
marginLeft: '2px',
position: 'absolute',
marginTop: '4px',
}}
height="18px"
width="18px"
/>
)}
{column.isSortedDesc === false && (
<img
src={SortAscending}
alt="Ascending"
style={{
verticalAlign: 'middle',
marginLeft: '2px',
position: 'absolute',
marginTop: '4px',
}}
height="18px"
width="18px"
/>
)}
{column.canSort && column.isSortedDesc === undefined && (
<img
src={SortUnsorted}
alt="Unsorted"
style={{
verticalAlign: 'middle',
marginLeft: '2px',
position: 'absolute',
marginTop: '4px',
}}
height="18px"
width="18px"
/>
)}
</div>
<div>{column.canFilter && column.render('Filter')}</div>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{isLoading ? (
<tr>
<td colSpan={columns.length}>
<Spinner />
</td>
</tr>
) : (
<>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
})}
</>
)}
</tbody>
</USTable>
)
}
Example #2
| Source File: auth.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #3
| Source File: clients.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #4
| Source File: history.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// // Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// // Or, override the default text filter to use
// // "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
{/* Render the columns filter UI */}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #5
| Source File: index.js From peppermint with GNU Affero General Public License v3.0 | 4 votes |
|
function Table({ columns, data }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
// fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) =>
rows.filter((row) => {
const rowValue = row.values[id];
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true;
}),
}),
[]
);
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
defaultColumn, // Be sure to pass the defaultColumn option
filterTypes,
initialState: {
pageIndex: 0,
},
},
useFilters, // useFilters!
useGlobalFilter,
usePagination
);
return (
<div className="overflow-x-auto md:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
<table
{...getTableProps()}
className="min-w-full divide-y divide-gray-200"
>
<thead className="bg-gray-50">
{headerGroups.map((headerGroup) => (
<tr
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.headers.map((header) => header.id)}
>
{headerGroup.headers.map((column) =>
column.hideHeader === false ? null : (
<th
{...column.getHeaderProps()}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{column.render("Header")}
<div>
{column.canFilter ? column.render("Filter") : null}
</div>
</th>
)
)}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="bg-white">
{row.cells.map((cell) => (
<td
className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<nav
className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<div className="flex flex-row flex-nowrap w-full space-x-2">
<p
htmlFor="location"
className="block text-sm font-medium text-gray-700 mt-4"
>
Show
</p>
<select
id="location"
name="location"
className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</div>
</div>
<div className="flex-1 flex justify-between sm:justify-end">
<button
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
Previous
</button>
<button
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
type="button"
onClick={() => nextPage()}
disabled={!canNextPage}
>
Next
</button>
</div>
</nav>
</div>
</div>
</div>
);
}
Example #6
| Source File: Masks.js From mailmask with GNU Affero General Public License v3.0 | 4 votes |
|
MaskTable = ({ items, setMaskStatus, me }) => {
const data = useMemo(() => items.map(({ name, enabled, stats, username }) => {
return {
name,
enabled,
username: username.username,
...stats,
}
}), [ items ])
const columns = useMemo(() => [
{
Header: 'Alias',
accessor: 'name',
},
{
Header: 'Enabled',
accessor: 'enabled',
hint: (
<HeaderHint>
<p>Whether email will be forwarded to your real email address.</p>
<p>If ON then email will be forwarded.</p>
<p>If OFF then email will be silently discarded. Any replies you send will still work.</p>
</HeaderHint>
)
},
{
Header: 'Count',
accessor: 'numMessages',
hint: (
<HeaderHint>
<p>The number of emails sent and received this calendar month ({thisMonthPeriodStr()}).</p>
</HeaderHint>
)
},
{
Header: 'Bandwidth',
accessor: 'numBytes',
hint: (
<HeaderHint>
<p>The amount of email data (text, html, attachments, etc) sent and received this calendar month ({thisMonthPeriodStr()}).</p>
</HeaderHint>
)
},
{
Header: 'Latest',
accessor: 'lastReceived',
hint: (
<HeaderHint>
<p>When the latest email was sent or received this calendar month ({thisMonthPeriodStr()}).</p>
</HeaderHint>
)
},
], [])
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
fuzzyText: fuzzyTextFilterFn,
}),
[]
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
state,
prepareRow,
preGlobalFilteredRows,
setGlobalFilter,
} = useTable({
columns,
data,
defaultColumn,
filterTypes,
setMaskStatus,
me,
}, useGlobalFilter, useSortBy)
return (
<div>
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
/>
<TableContainer>
<Table {...getTableProps()} cellSpacing="20">
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<HeaderCell {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.hint ? (
<HeaderHintButton
tooltip={column.hint}
/>
) : null}
{/* eslint-disable-next-line no-nested-ternary */}
{column.isSorted
? column.isSortedDesc
? <DownArrow />
: <UpArrow />
: ''}
</span>
</HeaderCell>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, index) => {
prepareRow(row)
return (
<DataRow {...row.getRowProps()} isEven={index % 2 === 0}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</DataRow>
)
})}
</tbody>
</Table>
</TableContainer>
</div>
)
}
Example #7
| Source File: Table.js From os-league-tools with MIT License | 4 votes |
|
export default function Table({
columns,
data,
filters = [],
filterState,
globalFilter,
defaultColumn,
initialState,
ExpandedRow,
customFilterProps = {},
enableResizeColumns = true,
}) {
const [records, setRecords] = useState(data);
useEffect(() => {
if (filters.length) {
setRecords(data.filter(record => filters.every(filter => filter(record, filterState, customFilterProps))));
} else {
setRecords(data);
}
}, [filterState, data, customFilterProps]);
const table = useTable(
{
initialState: { pageSize: 25, ...initialState },
columns,
data: records,
defaultColumn,
globalFilter,
manualFilters: true,
autoResetGlobalFilter: false,
autoResetSortBy: false,
autoResetPage: false,
autoResetExpanded: false,
getRowId: useCallback(row => row.id, []),
},
useFlexLayout,
useResizeColumns,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination
);
useEffect(() => {
// Reset to first page when filters are changed
table.gotoPage(0);
}, [filterState]);
const moveRow = (dragIndex, hoverIndex) => {
const dragRecord = records[dragIndex];
setRecords(
update(records, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragRecord],
],
})
);
};
return (
<>
<div className='flex flex-row flex-wrap justify-between pb-3 px-3 items-end'>
<span className='italic text-sm'>Showing: {table.page.length} rows</span>
<SearchBox globalFilter={table.state.globalFilter} setGlobalFilter={table.setGlobalFilter} />
</div>
<div className='overflow-auto px-3'>
<DndProvider backend={HTML5Backend}>
<div {...table.getTableProps()} style={{ minWidth: 'min-content' }}>
<div>
{table.headerGroups.map(headerGroup => (
<div
{...headerGroup.getHeaderGroupProps()}
className='heading-accent-md leading-loose border-b border-accent w-full'
>
{headerGroup.headers.map(column => (
<div
{...column.getHeaderProps(column.getSortByToggleProps())}
className='relative font-bold text-center'
>
{column.render('Header')}
{column.isSorted && (
<span className='icon-base absolute'>
{column.isSortedDesc ? 'arrow_drop_down' : 'arrow_drop_up'}
</span>
)}
{enableResizeColumns && (
<span {...column.getResizerProps()} className='resizer icon-lg'>
drag_handle
</span>
)}
</div>
))}
</div>
))}
</div>
<div {...table.getTableBodyProps()}>
{table.page.map(
(row, index) =>
table.prepareRow(row) || (
<Row
index={index}
row={row}
moveRow={moveRow}
isReorderEnabled={filterState?.reorderEnabled}
ExpandedRow={ExpandedRow}
{...row.getRowProps()}
/>
)
)}
</div>
<div className='flex flex-col justify-center text-center'>
<div>
<PageButton
onClick={() => table.gotoPage(0)}
disabled={!table.canPreviousPage}
text='<<'
/>
<PageButton
onClick={() => table.previousPage()}
disabled={!table.canPreviousPage}
text='<'
/>
<span className='text-xs'>
{table.state.pageIndex + 1} of {table.pageOptions.length}
</span>
<PageButton onClick={() => table.nextPage()} disabled={!table.canNextPage} text='>' />
<PageButton
onClick={() => table.gotoPage(table.pageCount - 1)}
disabled={!table.canNextPage}
text='>>'
/>
</div>
<span className='text-xs'>
Show:
<select
className='input-primary text-xs p-0 ml-1 text-center'
value={table.state.pageSize}
onChange={e => {
table.setPageSize(Number(e.target.value));
}}
>
{[25, 50, 100, 200].map(pageSize => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</select>
</span>
</div>
</div>
</DndProvider>
</div>
</>
);
}
