@ltht-react/table 2.0.161 → 2.0.163

package/src/molecules/table-component.tsx

@@ -1,120 +1,123 @@
-import Icon from '@ltht-react/icon'
-import { flexRender, Header as ReactTableHeader, Table } from '@tanstack/react-table'
-import { HTMLAttributes, useMemo, useRef } from 'react'
-import { calculateStaticColumnOffset } from './table-methods'
-import {
-  StyledNextPageButtonContainer,
-  StyledSpinnerContainer,
-  StyledTable,
-  StyledTableRow,
-  StyledTableData,
-  StyledTHead,
-} from './table-styled-components'
-import useDimensionsRef from './useDimensionRef'
-import { CellProps } from './table-cell'
-import { ITableConfig } from './table'
-import TableHeader from './table-header'
-
-const TableComponent = <T,>({ table, staticColumns = 0, headerAxis, ...rest }: ITableHeadProps<T>): JSX.Element => {
-  const firstColumn = useRef(null)
-  const secondColumn = useRef(null)
-  const tableElement = useRef(null)
-  const { width: firstColumnWidth } = useDimensionsRef(firstColumn, tableElement)
-  const { width: secondColumnWidth } = useDimensionsRef(secondColumn, tableElement)
-
-  const usingExpanderColumn = table.getHeaderGroups().some((x) => x.headers.some((h) => h.column.id === 'expander'))
-  const totalStaticColumns = useMemo(
-    () => (usingExpanderColumn ? staticColumns + 1 : staticColumns),
-    [usingExpanderColumn, staticColumns]
-  )
-
-  const getHeaderColumn = <TData, TValue>(header: ReactTableHeader<TData, TValue>, headerIndex: number) => {
-    const stickyWidth = calculateStaticColumnOffset(
-      headerIndex,
-      totalStaticColumns,
-      firstColumnWidth,
-      secondColumnWidth
-    )
-    const headerProps = {
-      header,
-      stickyWidth,
-    }
-    switch (headerIndex) {
-      case 0:
-        return <TableHeader key={header.id} ref={firstColumn} {...headerProps} />
-      case 1:
-        return <TableHeader key={header.id} ref={secondColumn} {...headerProps} />
-      default:
-        return <TableHeader key={header.id} {...headerProps} />
-    }
-  }
-
-  return (
-    <StyledTable ref={tableElement} {...rest}>
-      <StyledTHead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id} role="row">
-            {headerGroup.headers.map((header, headerIndex) => getHeaderColumn(header, headerIndex))}
-          </tr>
-        ))}
-      </StyledTHead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <StyledTableRow tableHeaderAxis={headerAxis} key={row.id} role="row">
-            {row.getVisibleCells().map((cell, cellIdx) => (
-              <StyledTableData
-                tableHeaderAxis={headerAxis}
-                stickyWidth={calculateStaticColumnOffset(
-                  cellIdx,
-                  totalStaticColumns,
-                  firstColumnWidth,
-                  secondColumnWidth
-                )}
-                key={cell.id}
-                role="cell"
-                style={(cell.getValue() as CellProps)?.parentStyle}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </StyledTableData>
-            ))}
-          </StyledTableRow>
-        ))}
-      </tbody>
-    </StyledTable>
-  )
-}
-
-const TableNavigationButton = ({ position, hidden, clickHandler }: ITableNavButtonProps) => (
-  <StyledNextPageButtonContainer
-    role="button"
-    elementPosition={position}
-    onClick={() => clickHandler()}
-    hidden={hidden}
-  >
-    <Icon type="chevron" direction={position === 'bottom' ? 'down' : 'right'} size="medium" />
-  </StyledNextPageButtonContainer>
-)
-
-const TableSpinner = ({ position, hidden }: ITableSpinnerProps) => (
-  <StyledSpinnerContainer elementPosition={position} hidden={hidden}>
-    <Icon type="spinner" size="medium" title="Loading..." />
-  </StyledSpinnerContainer>
-)
-
-interface ITableNavButtonProps {
-  position: 'bottom' | 'right'
-  hidden: boolean
-  clickHandler: () => void
-}
-
-interface ITableSpinnerProps {
-  position: 'bottom' | 'right'
-  hidden: boolean
-}
-
-interface ITableHeadProps<T> extends ITableConfig, HTMLAttributes<HTMLTableElement> {
-  table: Table<T>
-}
-
-export default TableComponent
-export { TableNavigationButton, TableSpinner }
+import Icon from '@ltht-react/icon'
+import { flexRender, Header as ReactTableHeader, Table } from '@tanstack/react-table'
+import { HTMLAttributes, useMemo, useRef } from 'react'
+import { calculateStaticColumnOffset } from './table-methods'
+import {
+  StyledNextPageButtonContainer,
+  StyledSpinnerContainer,
+  StyledTable,
+  StyledTableRow,
+  StyledTableData,
+  StyledTHead,
+} from './table-styled-components'
+import useDimensionsRef from './useDimensionRef'
+import { CellProps } from './table-cell'
+import { ITableConfig } from './table'
+import TableHeader from './table-header'
+
+const TableComponent = <T,>({ table, staticColumns = 0, headerAxis, ...rest }: ITableHeadProps<T>): JSX.Element => {
+  const tableIdPrefix = rest.id ? `${rest.id}-` : ''
+
+  const firstColumn = useRef(null)
+  const secondColumn = useRef(null)
+  const tableElement = useRef(null)
+  const { width: firstColumnWidth } = useDimensionsRef(firstColumn, tableElement)
+  const { width: secondColumnWidth } = useDimensionsRef(secondColumn, tableElement)
+
+  const usingExpanderColumn = table.getHeaderGroups().some((x) => x.headers.some((h) => h.column.id === 'expander'))
+  const totalStaticColumns = useMemo(
+    () => (usingExpanderColumn ? staticColumns + 1 : staticColumns),
+    [usingExpanderColumn, staticColumns]
+  )
+
+  const getHeaderColumn = <TData, TValue>(header: ReactTableHeader<TData, TValue>, headerIndex: number) => {
+    const stickyWidth = calculateStaticColumnOffset(
+      headerIndex,
+      totalStaticColumns,
+      firstColumnWidth,
+      secondColumnWidth
+    )
+    const headerProps = {
+      header,
+      stickyWidth,
+    }
+    switch (headerIndex) {
+      case 0:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={firstColumn} {...headerProps} />
+      case 1:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={secondColumn} {...headerProps} />
+      default:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} {...headerProps} />
+    }
+  }
+
+  return (
+    <StyledTable ref={tableElement} {...rest}>
+      <StyledTHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id} id={`${tableIdPrefix}${headerGroup.id}`} role="row">
+            {headerGroup.headers.map((header, headerIndex) => getHeaderColumn(header, headerIndex))}
+          </tr>
+        ))}
+      </StyledTHead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <StyledTableRow tableHeaderAxis={headerAxis} key={row.id} role="row">
+            {row.getVisibleCells().map((cell, cellIdx) => (
+              <StyledTableData
+                tableHeaderAxis={headerAxis}
+                stickyWidth={calculateStaticColumnOffset(
+                  cellIdx,
+                  totalStaticColumns,
+                  firstColumnWidth,
+                  secondColumnWidth
+                )}
+                key={cell.id}
+                id={`${tableIdPrefix}${cell.id}`}
+                role="cell"
+                style={(cell.getValue() as CellProps)?.parentStyle}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </StyledTableData>
+            ))}
+          </StyledTableRow>
+        ))}
+      </tbody>
+    </StyledTable>
+  )
+}
+
+const TableNavigationButton = ({ position, hidden, clickHandler }: ITableNavButtonProps) => (
+  <StyledNextPageButtonContainer
+    role="button"
+    elementPosition={position}
+    onClick={() => clickHandler()}
+    hidden={hidden}
+  >
+    <Icon type="chevron" direction={position === 'bottom' ? 'down' : 'right'} size="medium" />
+  </StyledNextPageButtonContainer>
+)
+
+const TableSpinner = ({ position, hidden }: ITableSpinnerProps) => (
+  <StyledSpinnerContainer elementPosition={position} hidden={hidden}>
+    <Icon type="spinner" size="medium" title="Loading..." />
+  </StyledSpinnerContainer>
+)
+
+interface ITableNavButtonProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+  clickHandler: () => void
+}
+
+interface ITableSpinnerProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+}
+
+interface ITableHeadProps<T> extends ITableConfig, HTMLAttributes<HTMLTableElement> {
+  table: Table<T>
+}
+
+export default TableComponent
+export { TableNavigationButton, TableSpinner }

package/src/molecules/table-header.tsx

@@ -1,36 +1,38 @@
-import { forwardRef, Ref } from 'react'
-import { flexRender, Header as ReactTableHeader } from '@tanstack/react-table'
-import { StyledTableHeader } from './table-styled-components'
-
-interface TableHeaderProps<TData, TValue> {
-  header: ReactTableHeader<TData, TValue>
-  stickyWidth?: number
-}
-
-export const Wrapper = <TData, TValue>(
-  { header, stickyWidth }: TableHeaderProps<TData, TValue>,
-  ref?: Ref<HTMLTableCellElement>
-) => (
-  <StyledTableHeader
-    ref={ref}
-    stickyWidth={stickyWidth}
-    colSpan={header.colSpan}
-    role="columnheader"
-    {...(header.column.id !== 'expander'
-      ? {
-          style: {
-            cursor: header.column.getCanSort() ? 'pointer' : '',
-          },
-          onClick: header.column.getToggleSortingHandler(),
-        }
-      : {})}
-  >
-    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-  </StyledTableHeader>
-)
-
-const TableHeader = forwardRef(Wrapper) as <TData, TValue>(
-  props: TableHeaderProps<TData, TValue> & { ref?: Ref<HTMLTableCellElement> }
-) => ReturnType<typeof Wrapper>
-
-export default TableHeader
+import { forwardRef, Ref } from 'react'
+import { flexRender, Header as ReactTableHeader } from '@tanstack/react-table'
+import { StyledTableHeader } from './table-styled-components'
+
+interface TableHeaderProps<TData, TValue> {
+  tableId?: string
+  header: ReactTableHeader<TData, TValue>
+  stickyWidth?: number
+}
+
+export const Wrapper = <TData, TValue>(
+  { tableId, header, stickyWidth }: TableHeaderProps<TData, TValue>,
+  ref?: Ref<HTMLTableCellElement>
+) => (
+  <StyledTableHeader
+    id={`${tableId}${header.id}`}
+    ref={ref}
+    stickyWidth={stickyWidth}
+    colSpan={header.colSpan}
+    role="columnheader"
+    {...(header.column.id !== 'expander'
+      ? {
+          style: {
+            cursor: header.column.getCanSort() ? 'pointer' : '',
+          },
+          onClick: header.column.getToggleSortingHandler(),
+        }
+      : {})}
+  >
+    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+  </StyledTableHeader>
+)
+
+const TableHeader = forwardRef(Wrapper) as <TData, TValue>(
+  props: TableHeaderProps<TData, TValue> & { ref?: Ref<HTMLTableCellElement> }
+) => ReturnType<typeof Wrapper>
+
+export default TableHeader