react-table#useGlobalFilter TypeScript 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.tsx From solo with MIT License | 5 votes |
|
Table = <T extends object>({
columns,
data,
initialSortBy,
manualPagination = true,
manualSortBy = true,
pageCount = 0,
fetchData,
onSelectedRowsChange,
renderSubComponent,
renderPagination,
renderFilterControls
}: TableProps<T>) => {
const stateReducer = (nextState: any, action: any, prevState: any) => {
if (action.type === "toggleSortBy" || action.type === "setGlobalFilter") {
return { ...nextState, pageIndex: 0 };
}
return nextState;
};
const instance = useTable(
{
columns,
data,
manualGlobalFilter: true,
disableMultiSort: true,
manualSortBy,
manualPagination,
autoResetSortBy: !manualSortBy,
pageCount,
stateReducer,
initialState: {
sortBy: initialSortBy ?? [],
pageSize: 20,
globalFilter: []
}
},
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect
);
const {
state: { sortBy, pageIndex, globalFilter, selectedRowIds }
} = instance;
useEffect(() => {
fetchData &&
fetchData({
sort: sortBy,
page: pageIndex + 1,
filters: globalFilter
});
}, [fetchData, sortBy, globalFilter, pageIndex]);
useEffect(() => {
onSelectedRowsChange && onSelectedRowsChange(instance);
}, [selectedRowIds, instance, onSelectedRowsChange]);
return (
<>
{renderFilterControls && renderFilterControls(instance)}
<USWDSTable {...instance.getTableProps()}>
<TableHead headerGroups={instance.headerGroups} />
<TableBody {...instance} renderSubComponent={renderSubComponent} />
</USWDSTable>
{renderPagination && renderPagination(instance)}
</>
);
}
Example #2
| Source File: index.tsx From platform with MIT License | 4 votes |
|
function Table({ columns, data, searchPlaceholder = "games...", colour = "bg-teal-700" }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state,
preGlobalFilteredRows,
setGlobalFilter,
} = useTable(
{
columns,
data,
initialState: {
hiddenColumns: [
"id",
"whiteMemberId",
"blackMemberId",
"liChessUrl",
"chesscomUrl",
"eventId",
"formArray",
"bulletDiff",
"blitzDiff",
"rapidDiff",
"isOnline",
"standardChange",
"rapidChange"
]
}
},
useFilters,
useGlobalFilter,
useSortBy,
usePagination
);
return (
<>
<div className="sm:gap-x-2">
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
searchPlaceholder={searchPlaceholder}
/>
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
<div className="mt-0" key={column.id}>
{column.render("Filter")}
</div>
) : null
)
)}
</div>
{/* table */}
<div className="relative mt-4 sm:flex sm:flex-col">
<div className="overflow-auto w-full shadow border-b border-gray-200 rounded-lg">
<table
{...getTableProps()}
className="w-full table-auto divide-y divide-gray-200"
>
<thead className="">
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
scope="col"
className={classNames(colour, "group px-2 py-3 text-center text-xs font-medium text-gray-100 uppercase")}
{...column.getHeaderProps(column.getSortByToggleProps())}
>
<div className=" flex items-center text-center justify-between">
{column.render("Header")}
{/* Add a sort direction indicator */}
<span>
{column.isSorted ? (
column.isSortedDesc ? (
<SortDownIcon className="w-4 h-4 text-gray-200" />
) : (
<SortUpIcon className="w-4 h-4 text-gray-200" />
)
) : (
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
)}
</span>
</div>
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
{page.map((row, i) => {
// new
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="py-4 px-2 whitespace-nowrap"
role="cell"
>
{cell.column.Cell.name === "defaultRenderer" ? (
<div className="text-sm text-gray-500">
{cell.render("Cell")}
</div>
) : (
cell.render("Cell")
)}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
{/* Pagination */}
<div className="py-3 flex items-center justify-between">
<div className="flex-1 flex items-center justify-between">
<div className="flex gap-x-2 items-baseline">
<span className="text-xs text-gray-700">
Page <span className="font-medium">{state.pageIndex + 1}</span> of{" "}
<span className="font-medium">{pageOptions.length}</span>
</span>
<label>
<span className="sr-only">Items Per Page</span>
<select
className="mt-1 block w-full text-xs rounded-md border-gray-300 shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-500 focus:ring-opacity-50"
value={state.pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[5, 10, 20].map((pageSize) => (
<option
className="hover:bg-teal-200"
key={pageSize}
value={pageSize}
>
Show {pageSize}
</option>
))}
</select>
</label>
</div>
<div>
<nav
className="relative mt-1 sm:mt-0 z-0 inline-flex rounded-md shadow-sm -space-x-px"
aria-label="Pagination"
>
<PageButton
className="rounded-l-md -mr-1 hidden sm:block"
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<span className="sr-only">First</span>
<ChevronDoubleLeftIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</PageButton>
<PageButton
className="rounded-l-md sm:rounded-none"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<span className="sr-only">Previous</span>
<ChevronLeftIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</PageButton>
<PageButton
className="rounded-r-md sm:rounded-none"
onClick={() => nextPage()}
disabled={!canNextPage}
>
<span className="sr-only">Next</span>
<ChevronRightIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</PageButton>
<PageButton
className="rounded-r-md hidden sm:block"
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
<span className="sr-only">Last</span>
<ChevronDoubleRightIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</PageButton>
</nav>
</div>
</div>
</div>
</>
);
}
Example #3
| Source File: index.tsx From polkabtc-ui with Apache License 2.0 | 4 votes |
|
StakedRelayerScoresTable = ({
challengeTime
}: Props): JSX.Element => {
const { polkaBtcLoaded } = useSelector((state: StoreType) => state.general);
const statsApi = usePolkabtcStats();
const [data, setData] = useState<(PatchedRelayerData)[]>([]);
const [status, setStatus] = useState(STATUSES.IDLE);
const [error, setError] = useState<Error | null>(null);
const { t } = useTranslation();
useEffect(() => {
if (!polkaBtcLoaded) return;
if (!statsApi) return;
(async () => {
try {
setStatus(STATUSES.PENDING);
const response = await statsApi.getRelayers(challengeTime);
const sortedStakedRelayers = response.data.sort((a, b) => b.lifetime_sla - a.lifetime_sla);
const transformedStakedRelayers = sortedStakedRelayers.map(stakedRelayer => ({
...stakedRelayer,
lifetime_sla: Number(stakedRelayer.lifetime_sla).toFixed(2)
}));
setStatus(STATUSES.RESOLVED);
setData(transformedStakedRelayers);
} catch (error) {
setStatus(STATUSES.REJECTED);
setError(error);
}
})();
}, [
polkaBtcLoaded,
challengeTime,
statsApi
]);
const columns = useMemo(
() => [
{
Header: t('leaderboard.account_id'),
accessor: 'id',
Filter: DefaultColumnFilter,
classNames: [
'text-left'
]
},
{
Header: `${t('leaderboard.stake')} (DOT)`,
accessor: 'stake',
classNames: [
'text-right'
],
style: {
minWidth: 120
}
},
{
Header: t('leaderboard.block_count'),
accessor: 'block_count',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.lifetime_sla'),
accessor: 'lifetime_sla',
Filter: NumberRangeColumnFilter,
filter: 'between',
classNames: [
'text-right'
]
}
],
[t]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable(
{
columns,
data
},
useFilters,
useGlobalFilter,
useSortBy
);
if (status === STATUSES.IDLE || status === STATUSES.PENDING) {
return (
<div
className={clsx(
'flex',
'justify-center'
)}>
<EllipsisLoader dotClassName='bg-interlayTreePoppy-400' />
</div>
);
}
if (status === STATUSES.REJECTED && error) {
return (
<ErrorHandler error={error} />
);
}
if (status === STATUSES.RESOLVED) {
return (
<InterlayTableContainer>
<InterlayTable {...getTableProps()}>
<InterlayThead>
{headerGroups.map(headerGroup => (
// eslint-disable-next-line react/jsx-key
<InterlayTr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
// eslint-disable-next-line react/jsx-key
<InterlayTh
{...column.getHeaderProps([
{
className: clsx(column.classNames),
style: column.style
},
column.getSortByToggleProps()
])}>
<SortByContainer>
<span>{column.render('Header')}</span>
<SortBy
isSorted={column.isSorted}
isSortedDesc={column.isSortedDesc} />
</SortByContainer>
{column.canFilter && column.Filter && (
<div>{column.render('Filter', { placeholder: 'Search by Account ID' })}</div>
)}
</InterlayTh>
))}
</InterlayTr>
))}
</InterlayThead>
<InterlayTbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
// eslint-disable-next-line react/jsx-key
<InterlayTr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
// eslint-disable-next-line react/jsx-key
<InterlayTd
{...cell.getCellProps([
{
className: clsx(cell.column.classNames),
style: cell.column.style
}
])}>
{cell.render('Cell')}
</InterlayTd>
);
})}
</InterlayTr>
);
})}
</InterlayTbody>
</InterlayTable>
</InterlayTableContainer>
);
}
return null;
}
Example #4
| Source File: index.tsx From polkabtc-ui with Apache License 2.0 | 4 votes |
|
VaultScoresTable = ({
challengeTime
}: Props): JSX.Element => {
const { polkaBtcLoaded } = useSelector((state: StoreType) => state.general);
const statsApi = usePolkabtcStats();
const [data, setData] = React.useState<PatchedVaultData[]>([]);
const [status, setStatus] = React.useState(STATUSES.IDLE);
const [error, setError] = React.useState<Error | null>(null);
const { t } = useTranslation();
// TODO: should add an abort-controller
React.useEffect(() => {
// TODO: should follow `<AuthenticatedApp />` vs. `<UnauthenticatedApp />` approach
// - (Re: https://kentcdodds.com/blog/authentication-in-react-applications)
if (!polkaBtcLoaded) return;
if (!statsApi) return;
(async () => {
try {
setStatus(STATUSES.PENDING);
const response = await statsApi.getChallengeVaults(challengeTime);
const sortedVaults = response.data.sort((a, b) => b.lifetime_sla - a.lifetime_sla);
const transformedVaults = sortedVaults.map(vault => ({
...vault,
lifetime_sla: Number(vault.lifetime_sla).toFixed(2)
}));
setStatus(STATUSES.RESOLVED);
setData(transformedVaults);
} catch (error) {
setStatus(STATUSES.REJECTED);
setError(error);
}
})();
}, [
polkaBtcLoaded,
challengeTime,
statsApi
]);
const columns = React.useMemo(
() => [
// TODO: should type properly
{
Header: t('leaderboard.account_id'),
accessor: 'id',
Filter: DefaultColumnFilter,
classNames: [
'text-left'
]
},
{
Header: `${t('leaderboard.collateral')} (DOT)`,
accessor: 'collateral',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.request_issue_count'),
accessor: 'request_issue_count',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.execute_issue_count'),
accessor: 'execute_issue_count',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.request_redeem_count'),
accessor: 'request_redeem_count',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.execute_redeem_count'),
accessor: 'execute_redeem_count',
classNames: [
'text-right'
]
},
{
Header: t('leaderboard.lifetime_sla'),
accessor: 'lifetime_sla',
Filter: NumberRangeColumnFilter,
filter: 'between',
classNames: [
'text-right'
]
}
],
[t]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable(
{
columns,
data
},
useFilters,
useGlobalFilter,
useSortBy
);
if (status === STATUSES.IDLE || status === STATUSES.PENDING) {
return (
<div
className={clsx(
'flex',
'justify-center'
)}>
<EllipsisLoader dotClassName='bg-interlayTreePoppy-400' />
</div>
);
}
if (status === STATUSES.REJECTED && error) {
return (
<ErrorHandler error={error} />
);
}
if (status === STATUSES.RESOLVED) {
// TODO: should optimize re-renders https://kentcdodds.com/blog/optimize-react-re-renders
return (
<InterlayTableContainer>
<InterlayTable {...getTableProps()}>
<InterlayThead>
{headerGroups.map(headerGroup => (
// eslint-disable-next-line react/jsx-key
<InterlayTr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
// eslint-disable-next-line react/jsx-key
<InterlayTh
{...column.getHeaderProps([
{
className: clsx(column.classNames),
style: column.style
},
column.getSortByToggleProps()
])}>
<SortByContainer>
<span>{column.render('Header')}</span>
<SortBy
isSorted={column.isSorted}
isSortedDesc={column.isSortedDesc} />
</SortByContainer>
{column.canFilter && column.Filter && (
<div>{column.render('Filter', { placeholder: 'Search by Account ID' })}</div>
)}
</InterlayTh>
))}
</InterlayTr>
))}
</InterlayThead>
<InterlayTbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
// eslint-disable-next-line react/jsx-key
<InterlayTr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
// eslint-disable-next-line react/jsx-key
<InterlayTd
{...cell.getCellProps([
{
className: clsx(cell.column.classNames),
style: cell.column.style
}
])}>
{cell.render('Cell')}
</InterlayTd>
);
})}
</InterlayTr>
);
})}
</InterlayTbody>
</InterlayTable>
</InterlayTableContainer>
);
}
return null;
}
