Skip to content

Commit

Permalink
NEOS-594:updated pagination logic to be controlled (#1045)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evisdrenova
evisdrenova committed Jan 5, 2024
1 parent a36ce1c commit 8551cf4
Show file tree
Hide file tree
Showing 14 changed files with 161 additions and 48 deletions.
19 changes: 14 additions & 5 deletions .../apps/web/app/[account]/connections/components/ConnectionsTable/data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,16 @@ import {

interface DataTablePaginationProps<TData> {
table: Table<TData>;
setPagination: (val: number) => void;
setPageSize: (val: number) => void;
}

export function DataTablePagination<TData>({
table,
setPagination,
setPageSize,
}: DataTablePaginationProps<TData>) {
console.log('page', table.getPaginationRowModel());
return (
<div className="flex items-center justify-between px-2">
<div className="flex-1 text-sm text-muted-foreground">
Expand All @@ -34,7 +39,7 @@ export function DataTablePagination<TData>({
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px]">
Expand All @@ -57,7 +62,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
onClick={() => setPagination(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
Expand All @@ -66,7 +71,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex - 1)
}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
Expand All @@ -75,7 +82,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex + 1)
}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
Expand All @@ -84,7 +93,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
onClick={() => setPagination(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
Expand Down
10 changes: 9 additions & 1 deletion frontend/apps/web/app/[account]/connections/components/ConnectionsTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export function DataTable<TData, TValue>({
);
const [sorting, setSorting] = React.useState<SortingState>([]);

const [pagination, setPagination] = React.useState<number>(0);
const [pageSize, setPageSize] = React.useState<number>(10);

const table = useReactTable({
data,
columns,
Expand All @@ -52,6 +55,7 @@ export function DataTable<TData, TValue>({
columnVisibility,
rowSelection,
columnFilters,
pagination: { pageIndex: pagination, pageSize: pageSize },
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
Expand Down Expand Up @@ -119,7 +123,11 @@ export function DataTable<TData, TValue>({
</TableBody>
</Table>
</div>
<DataTablePagination table={table} />
<DataTablePagination
table={table}
setPagination={setPagination}
setPageSize={setPageSize}
/>
</div>
);
}
19 changes: 14 additions & 5 deletions frontend/apps/web/app/[account]/jobs/components/DataTable/data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,16 @@ import {

interface DataTablePaginationProps<TData> {
table: Table<TData>;
setPagination: (val: number) => void;
setPageSize: (val: number) => void;
}

export function DataTablePagination<TData>({
table,
setPagination,
setPageSize,
}: DataTablePaginationProps<TData>) {
console.log('page', table.getPaginationRowModel());
return (
<div className="flex items-center justify-between px-2">
<div className="flex-1 text-sm text-muted-foreground">
Expand All @@ -34,7 +39,7 @@ export function DataTablePagination<TData>({
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px]">
Expand All @@ -57,7 +62,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
onClick={() => setPagination(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
Expand All @@ -66,7 +71,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex - 1)
}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
Expand All @@ -75,7 +82,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex + 1)
}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
Expand All @@ -84,7 +93,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
onClick={() => setPagination(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
Expand Down
10 changes: 9 additions & 1 deletion frontend/apps/web/app/[account]/jobs/components/DataTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export function DataTable<TData, TValue>({
);
const [sorting, setSorting] = React.useState<SortingState>([]);

const [pagination, setPagination] = React.useState<number>(0);
const [pageSize, setPageSize] = React.useState<number>(10);

const table = useReactTable({
data,
columns,
Expand All @@ -52,6 +55,7 @@ export function DataTable<TData, TValue>({
columnVisibility,
rowSelection,
columnFilters,
pagination: { pageIndex: pagination, pageSize: pageSize },
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
Expand Down Expand Up @@ -119,7 +123,11 @@ export function DataTable<TData, TValue>({
</TableBody>
</Table>
</div>
<DataTablePagination table={table} />
<DataTablePagination
table={table}
setPagination={setPagination}
setPageSize={setPageSize}
/>
</div>
);
}
19 changes: 14 additions & 5 deletions ...apps/web/app/[account]/runs/[id]/components/JobRunActivityTable/data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,16 @@ import {

interface DataTablePaginationProps<TData> {
table: Table<TData>;
setPagination: (val: number) => void;
setPageSize: (val: number) => void;
}

export function DataTablePagination<TData>({
table,
setPagination,
setPageSize,
}: DataTablePaginationProps<TData>) {
console.log('page', table.getPaginationRowModel());
return (
<div className="flex items-center justify-between px-2">
<div className="flex-1 text-sm text-muted-foreground">
Expand All @@ -34,7 +39,7 @@ export function DataTablePagination<TData>({
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px]">
Expand All @@ -57,7 +62,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
onClick={() => setPagination(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
Expand All @@ -66,7 +71,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex - 1)
}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
Expand All @@ -75,7 +82,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex + 1)
}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
Expand All @@ -84,7 +93,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
onClick={() => setPagination(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
Expand Down
13 changes: 9 additions & 4 deletions frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
VisibilityState,
flexRender,
getCoreRowModel,
getExpandedRowModel,
getFacetedRowModel,
getFacetedUniqueValues,
getFilteredRowModel,
Expand Down Expand Up @@ -48,6 +47,9 @@ export function DataTable({ columns, data, isError }: DataTableProps) {
setColumnVisibility({ error: isError });
}, [isError]);

const [pagination, setPagination] = React.useState<number>(0);
const [pageSize, setPageSize] = React.useState<number>(10);

const table = useReactTable({
data,
columns,
Expand All @@ -56,15 +58,14 @@ export function DataTable({ columns, data, isError }: DataTableProps) {
columnVisibility,
rowSelection,
columnFilters,
pagination: { pageIndex: pagination, pageSize: pageSize },
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
getRowCanExpand: () => true,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
Expand Down Expand Up @@ -135,7 +136,11 @@ export function DataTable({ columns, data, isError }: DataTableProps) {
</TableBody>
</Table>
</div>
<DataTablePagination table={table} />
<DataTablePagination
table={table}
setPagination={setPagination}
setPageSize={setPageSize}
/>
</div>
);
}
Expand Down
19 changes: 14 additions & 5 deletions frontend/apps/web/app/[account]/runs/components/JobRunsTable/data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,16 @@ import {

interface DataTablePaginationProps<TData> {
table: Table<TData>;
setPagination: (val: number) => void;
setPageSize: (val: number) => void;
}

export function DataTablePagination<TData>({
table,
setPagination,
setPageSize,
}: DataTablePaginationProps<TData>) {
console.log('page', table.getPaginationRowModel());
return (
<div className="flex items-center justify-between px-2">
<div className="flex-1 text-sm text-muted-foreground">
Expand All @@ -34,7 +39,7 @@ export function DataTablePagination<TData>({
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px]">
Expand All @@ -57,7 +62,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
onClick={() => setPagination(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
Expand All @@ -66,7 +71,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex - 1)
}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
Expand All @@ -75,7 +82,9 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
onClick={() =>
setPagination(table.getState().pagination.pageIndex + 1)
}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
Expand All @@ -84,7 +93,7 @@ export function DataTablePagination<TData>({
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
onClick={() => setPagination(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
Expand Down
Loading

1 comment on commit 8551cf4

@vercel
Copy link

@vercel vercel bot commented on 8551cf4 Jan 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

neosync-marketing – ./marketing

neosync-marketing-app.vercel.app
neosync-marketing-neosync.vercel.app
www.neosync.dev
neosync-marketing-git-main-neosync.vercel.app
neosync.dev

Please sign in to comment.