mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekayandHanzo Dev
03f38fbef0
react-table went from 8 to 9 with nothing migrated. 9 has no useReactTable and no getCoreRowModel, so the one component every list in the app renders through could not be imported, and ColumnDef takes the table's features as its first type argument, so all 42 column lists stopped typing their rows: 217 of the 498 errors in the app's typecheck. DataTable now names the four features it uses — paging, row selection, column visibility, column sizing — and calls useTable. DataTableColumnDef is ColumnDef over those features, so a column list still says only what a row is. The second type parameter goes: 9's table takes columns of unknown value, and no caller ever passed one. Two things the types turned up. `enableSorting: false` sat on two select columns of a table that has never sorted; without the sorting feature the option does not exist, and neither does the sorting. The organisation insights table erased its three row types through `as unknown as` to feed one DataTable; it renders one per view, typed, and the casts are gone. The server rejects any other view before the component renders. data-table.test.tsx renders the table and drives the instance: headers and cells, a hidden column, a sized one, one-based paging read from the props and reported back, selection by the caller's row id. Against the old file it fails 7 of 7 at the import. Co-authored-by: Hanzo Dev <[email protected]>
142 lines
4.7 KiB
TypeScript
142 lines
4.7 KiB
TypeScript
import { Plural, Trans } from '@lingui/react/macro';
|
|
import type { RowData } from '@tanstack/react-table';
|
|
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
|
|
import { match } from 'ts-pattern';
|
|
|
|
import { Button } from './button';
|
|
import type { DataTableInstance } from './data-table';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
|
|
|
|
interface DataTablePaginationProps<TData extends RowData> {
|
|
table: DataTableInstance<TData>;
|
|
|
|
/**
|
|
* The type of information to show on the left hand side of the pagination.
|
|
*
|
|
* Defaults to 'VisibleCount'.
|
|
*/
|
|
additionalInformation?: 'SelectedCount' | 'VisibleCount' | 'None';
|
|
}
|
|
|
|
export function DataTablePagination<TData extends RowData>({
|
|
table,
|
|
additionalInformation = 'VisibleCount',
|
|
}: DataTablePaginationProps<TData>) {
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
|
|
<div className="text-muted-foreground flex-1 text-sm">
|
|
{match(additionalInformation)
|
|
.with('SelectedCount', () => (
|
|
<span>
|
|
<Plural
|
|
value={table.getFilteredRowModel().rows.length}
|
|
one={
|
|
<Trans>
|
|
{table.getFilteredSelectedRowModel().rows.length} of # row selected.
|
|
</Trans>
|
|
}
|
|
other={
|
|
<Trans>
|
|
{table.getFilteredSelectedRowModel().rows.length} of # rows selected.
|
|
</Trans>
|
|
}
|
|
/>
|
|
</span>
|
|
))
|
|
.with('VisibleCount', () => {
|
|
const visibleRows = table.getFilteredRowModel().rows.length;
|
|
|
|
return (
|
|
<span data-testid="data-table-count">
|
|
<Plural
|
|
value={visibleRows}
|
|
one={`Showing # result.`}
|
|
other={`Showing # results.`}
|
|
/>
|
|
</span>
|
|
);
|
|
})
|
|
.with('None', () => null)
|
|
.exhaustive()}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-2">
|
|
<p className="text-sm font-medium whitespace-nowrap">
|
|
<Trans>Rows per page</Trans>
|
|
</p>
|
|
<Select
|
|
value={`${table.state.pagination.pageSize}`}
|
|
onValueChange={(value) => {
|
|
table.setPageSize(Number(value));
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 w-[70px]">
|
|
<SelectValue placeholder={table.state.pagination.pageSize} />
|
|
</SelectTrigger>
|
|
<SelectContent side="top">
|
|
{[10, 20, 30, 40, 50].map((pageSize) => (
|
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
|
{pageSize}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-x-6 gap-y-4 lg:gap-x-8">
|
|
<div className="flex items-center text-sm font-medium md:justify-center">
|
|
<Trans>
|
|
Page {table.state.pagination.pageIndex + 1} of {table.getPageCount() || 1}
|
|
</Trans>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-2">
|
|
<Button
|
|
variant="outline"
|
|
className="hidden h-8 w-8 p-0 lg:flex"
|
|
onClick={() => table.setPageIndex(0)}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className="sr-only">
|
|
<Trans>Go to first page</Trans>
|
|
</span>
|
|
<ChevronsLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-8 w-8 p-0"
|
|
onClick={() => table.previousPage()}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className="sr-only">
|
|
<Trans>Go to previous page</Trans>
|
|
</span>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-8 w-8 p-0"
|
|
onClick={() => table.nextPage()}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className="sr-only">
|
|
<Trans>Go to next page</Trans>
|
|
</span>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="hidden h-8 w-8 p-0 lg:flex"
|
|
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className="sr-only">
|
|
<Trans>Go to last page</Trans>
|
|
</span>
|
|
<ChevronsRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|