Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: #439 server side rendering of table with pagination #440

Merged
merged 1 commit into from
May 1, 2022
Merged

fix: #439 server side rendering of table with pagination #440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hSfoSF nextui-c-hSfoSF-gikTHb-shadow-true nextui-c-hSfoSF-bzEnZV-borderWeight-normal nextui-c-hSfoSF-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-hLONex nextui-c-hLONex-dicOIe-color-primary nextui-c-hLONex-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria1907238169-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria1907238169-15-.0.0\\">NAME</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-gkciFS-hjbeJO-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria1907238169-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-gkciFS-hjbeJO-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria1907238169-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria1907238169-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria1907238169-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-cuoPNV nextui-c-cuoPNV-dicOIe-color-primary nextui-c-cuoPNV-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria9051012084-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9051012084-15-.0.0\\">NAME</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-gkciFS-hjbeJO-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9051012084-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-gkciFS-hjbeJO-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9051012084-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9051012084-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9051012084-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;

exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hSfoSF nextui-c-hSfoSF-gikTHb-shadow-true nextui-c-hSfoSF-bzEnZV-borderWeight-normal nextui-c-hSfoSF-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-hLONex nextui-c-hLONex-dicOIe-color-primary nextui-c-hLONex-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria1907238169-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria1907238169-2-.0.0\\">NAME</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria1907238169-2-.0.1\\">TYPE</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria1907238169-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria1907238169-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria1907238169-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-eXPDRa nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-cuoPNV nextui-c-cuoPNV-dicOIe-color-primary nextui-c-cuoPNV-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria9051012084-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9051012084-2-.0.0\\">NAME</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9051012084-2-.0.1\\">TYPE</th><th class=\\"nextui-c-gkciFS nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9051012084-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9051012084-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9051012084-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-coKxkr nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
4 changes: 3 additions & 1 deletion packages/react/src/table/table-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
);
const [collection, setCollection] = React.useState(defaultValues?.collection);
const [rowsPerPage, setRowsPerPage] = React.useState(
defaultContext.rowsPerPage
defaultValues?.rowsPerPage === undefined
? defaultContext.rowsPerPage
: defaultValues?.rowsPerPage
);
const [currentPage, setCurrentPage] = React.useState(
defaultContext.currentPage
Expand Down
14 changes: 9 additions & 5 deletions packages/react/src/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
import TablePagination from './table-pagination';
import TableFooter from './table-footer';
import TableBody from './table-body';
import { hasChild, pickSingleChild } from '../utils/collections';
import { pickSingleChild } from '../utils/collections';
import {
StyledTable,
StyledTableContainer,
Expand All @@ -40,7 +40,7 @@ import {
} from './table.styles';
import TableContext, { TableConfig } from './table-context';
import { excludedTableProps } from '../utils/prop-types';
import { isInfinityScroll } from './utils';
import { isInfinityScroll, hasPaginationChild } from './utils';
import withDefaults from '../utils/with-defaults';
import clsx from '../utils/clsx';

Expand Down Expand Up @@ -89,7 +89,10 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
CollectionChildren<any>
>(children, TablePagination);

const hasPagination = hasChild(children, TablePagination);
const { hasPagination, rowsPerPage } = hasPaginationChild(
children,
TablePagination
);

const state = useTableState({
...tableProps,
Expand Down Expand Up @@ -123,9 +126,10 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
return {
collection,
color,
animated
animated,
rowsPerPage
};
}, [collection, animated, color]);
}, [collection, animated, color, rowsPerPage]);

return (
<TableContext.Provider defaultValues={initialValues}>
Expand Down
17 changes: 17 additions & 0 deletions packages/react/src/table/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import React, { ReactNode } from 'react';
import { AriaCheckboxProps } from '@react-types/checkbox';
import { TableCollection } from '@react-types/table';

export const hasPaginationChild = (
children: ReactNode | undefined,
child: React.ElementType
): { hasPagination: boolean; rowsPerPage: number } => {
const pagination = React.Children.toArray(children).find(
(item) => React.isValidElement(item) && item.type === child
);
if (React.isValidElement(pagination)) {
return {
hasPagination: true,
rowsPerPage: pagination?.props?.rowsPerPage || 0
};
}
return { hasPagination: false, rowsPerPage: 0 };
};

export const isInfinityScroll = (collection: TableCollection<unknown>) => {
const bodyProps = collection.body?.props;
return (
Expand Down