From b36a2c053d3ea4340d39ffef125dd49053539444 Mon Sep 17 00:00:00 2001 From: shindigira Date: Sat, 25 May 2024 10:21:38 -0700 Subject: [PATCH 1/5] chore(Table): enabled ref forwarding --- src/components/Table/Table.tsx | 117 ++++++++++++++++++--------------- 1 file changed, 63 insertions(+), 54 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index bfc8516c..0050b6a2 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { type ReactNode } from 'react'; +import { forwardRef, type ReactNode } from 'react'; import type { JSXElement } from '~/src/types/jsxElement'; import { type WidthPercent } from '../../types/WidthPercent'; import { Pagination } from '../Pagination/Pagination'; @@ -54,63 +54,72 @@ export interface TableProperties { * * Source: https://cfpb.github.io/design-system/components/tables */ -export const Table = ({ - caption, - columns, - rows, - isResponsive = false, - isDirectory = false, - isScrollableHorizontal = false, - isStriped = false, - isPaginated = false, - startPage = MIN_PAGE, - perPage = DEFAULT_PER_PAGE, - className, - ...others -}: React.HTMLProps & TableProperties): React.ReactElement => { - const [visibleRows, paginationProperties] = usePagination({ - rows, - isPaginated, - startPage, - perPage - }); +export const Table = forwardRef< + HTMLTableElement, + React.HTMLProps & TableProperties +>( + ( + { + caption, + columns, + rows, + isResponsive = false, + isDirectory = false, + isScrollableHorizontal = false, + isStriped = false, + isPaginated = false, + startPage = MIN_PAGE, + perPage = DEFAULT_PER_PAGE, + className, + ...others + }, + reference + ): React.ReactElement => { + const [visibleRows, paginationProperties] = usePagination({ + rows, + isPaginated, + startPage, + perPage + }); - const tableClassnames = []; + const tableClassnames = []; - if (isResponsive || isDirectory) - tableClassnames.push('o-table o-table__stack-on-small'); - if (isDirectory) tableClassnames.push('o-table__entry-header-on-small'); - if (isStriped) tableClassnames.push('o-table__striped'); - if (isPaginated) tableClassnames.push('u-w100pct'); - if (className) tableClassnames.push(className); + if (isResponsive || isDirectory) + tableClassnames.push('o-table o-table__stack-on-small'); + if (isDirectory) tableClassnames.push('o-table__entry-header-on-small'); + if (isStriped) tableClassnames.push('o-table__striped'); + if (isPaginated) tableClassnames.push('u-w100pct'); + if (className) tableClassnames.push(className); - const tableContent = ( - <> - - - {buildColumnHeaders(columns)} - {buildRows(visibleRows, columns)} -
{caption}
- {isPaginated ? : null} - - ); - - if (isScrollableHorizontal) { - return ( -
- {tableContent} -
+ const tableContent = ( + <> + + + {buildColumnHeaders(columns)} + {buildRows(visibleRows, columns)} +
{caption}
+ {isPaginated ? : null} + ); - } - return tableContent; -}; + if (isScrollableHorizontal) { + return ( +
+ {tableContent} +
+ ); + } + + return tableContent; + } +); export default Table; From de113e7650bbb54cbcf4a65c0ff1e0cf66924056 Mon Sep 17 00:00:00 2001 From: shindigira Date: Sat, 25 May 2024 11:12:45 -0700 Subject: [PATCH 2/5] changed to div container ref --- src/components/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 0050b6a2..5009d506 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -96,7 +96,6 @@ export const Table = forwardRef< @@ -112,6 +111,7 @@ export const Table = forwardRef<
{tableContent}
From 0e0124ea1d869a0eb985b68d5b42ae84d9a32f2e Mon Sep 17 00:00:00 2001 From: shindigira Date: Sat, 25 May 2024 11:13:38 -0700 Subject: [PATCH 3/5] changed to allow accepting a div container ref and a tableref --- src/components/Table/Table.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 5009d506..3d600ec6 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import type { ForwardedRef } from 'react'; import { forwardRef, type ReactNode } from 'react'; import type { JSXElement } from '~/src/types/jsxElement'; import { type WidthPercent } from '../../types/WidthPercent'; @@ -47,6 +48,9 @@ export interface TableProperties { perPage?: number; // Additional CSS classes className?: string; + // Refs for div and table elements + divRef?: ForwardedRef; + tableRef?: ForwardedRef; } /** @@ -71,6 +75,8 @@ export const Table = forwardRef< startPage = MIN_PAGE, perPage = DEFAULT_PER_PAGE, className, + divRef, + tableRef, ...others }, reference @@ -96,6 +102,7 @@ export const Table = forwardRef<
{caption}
@@ -111,7 +118,7 @@ export const Table = forwardRef<
{tableContent}
@@ -122,4 +129,6 @@ export const Table = forwardRef< } ); +Table.displayName = 'Table'; + export default Table; From 90fccd642fcbce85c7e9625792f6a54e85825140 Mon Sep 17 00:00:00 2001 From: shindigira Date: Sat, 25 May 2024 11:31:25 -0700 Subject: [PATCH 4/5] ts update --- src/components/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 3d600ec6..9f1afc16 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -59,7 +59,7 @@ export interface TableProperties { * Source: https://cfpb.github.io/design-system/components/tables */ export const Table = forwardRef< - HTMLTableElement, + HTMLDivElement, React.HTMLProps & TableProperties >( ( From 4388a21167ea3f5e44143b734af56f81fe649c93 Mon Sep 17 00:00:00 2001 From: shindigira Date: Sat, 25 May 2024 12:33:02 -0700 Subject: [PATCH 5/5] ts update 2 --- src/components/Table/Table.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 9f1afc16..4b821e7a 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import type { ForwardedRef } from 'react'; +import type { ForwardedRef, HTMLProps } from 'react'; import { forwardRef, type ReactNode } from 'react'; import type { JSXElement } from '~/src/types/jsxElement'; import { type WidthPercent } from '../../types/WidthPercent'; @@ -9,7 +9,9 @@ import { usePagination } from '../Pagination/usePagination'; import './table.less'; import { buildColumnHeaders, buildRows } from './tableUtils'; -const Caption = ({ children }: { children: ReactNode }): JSXElement => { +const Caption = ({ + children +}: HTMLProps): JSXElement => { if (!children) return null; return ; };
{caption}{children}