@ltht-react/table 2.0.151 → 2.0.153

package/src/molecules/table.tsx

@@ -1,163 +1,168 @@
-import { FC, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  getCoreRowModel,
-  useReactTable,
-  getExpandedRowModel,
-  getSortedRowModel,
-  ExpandedState,
-  SortingState,
-  PaginationState,
-  ColumnDef,
-  SortingFn,
-} from '@tanstack/react-table'
-import { Axis } from '@ltht-react/types'
-import { ScrollableContainer } from './table-styled-components'
-import useScrollRef from './useScrollRef'
-import { handleDataUpdate, handleDataUpdateForManualPagination, handleScrollEvent } from './table-methods'
-import TableComponent, { TableNavigationButton, TableSpinner } from './table-component'
-import { CellProps } from './table-cell'
-
-const Table: FC<IProps> = ({
-  tableData,
-  staticColumns = 0,
-  currentPage = 1,
-  pageSize: pageSizeParam = 10,
-  headerAxis = 'x',
-  manualPagination = false,
-  getCanNextPage = () => false,
-  nextPage = () => null,
-  isFetching = false,
-  keepPreviousData = false,
-  maxHeight,
-  maxWidth,
-  isFlex = false,
-  enableSorting = true,
-  sortingFunctions = undefined,
-}) => {
-  const scrollableDivElement = useRef(null)
-  const scrollState = useScrollRef(scrollableDivElement)
-
-  const [expanded, setExpanded] = useState<ExpandedState>({})
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: currentPage - 1,
-    pageSize: pageSizeParam,
-  })
-
-  const pagination = useMemo(() => ({ pageIndex, pageSize }), [pageIndex, pageSize])
-  const [data, setData] = useState<DataEntity[]>([])
-  const [columns, setColumns] = useState<ColumnDef<DataEntity>[]>([])
-  const [pageCount, setPageCount] = useState<number>(-1)
-
-  useEffect(() => {
-    if (!manualPagination) {
-      handleDataUpdate(tableData, pageIndex, pageSize, headerAxis, setColumns, setData, setPageCount)
-    }
-  }, [pageIndex, pageSize, headerAxis, tableData, manualPagination])
-
-  useEffect(() => {
-    if (manualPagination) {
-      handleDataUpdateForManualPagination(tableData, headerAxis, keepPreviousData, setColumns, setData)
-    }
-  }, [headerAxis, tableData, manualPagination, keepPreviousData])
-
-  const table = useReactTable({
-    data,
-    columns,
-    ...(!manualPagination ? { pageCount } : {}),
-    state: {
-      expanded,
-      sorting,
-      ...(!manualPagination ? { pagination } : {}),
-    },
-    manualPagination: true,
-    onExpandedChange: setExpanded,
-    onSortingChange: setSorting,
-    enableSorting,
-    sortingFns: sortingFunctions,
-    getSubRows: (row) => row.subRows,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    ...(!manualPagination ? { onPaginationChange: setPagination } : {}),
-  })
-
-  useEffect(() => {
-    if (!scrollState) {
-      return
-    }
-
-    if (!manualPagination) {
-      handleScrollEvent(table, headerAxis, scrollState)
-    }
-  }, [scrollState, table, headerAxis, manualPagination])
-
-  const getNextPage = () => {
-    if (manualPagination) {
-      nextPage()
-    } else {
-      table.nextPage()
-    }
-  }
-
-  return (
-    <ScrollableContainer ref={scrollableDivElement} tableHeaderAxis={headerAxis} {...{ maxHeight, maxWidth }}>
-      <TableComponent table={table} staticColumns={staticColumns} headerAxis={headerAxis} isFlex={isFlex} />
-      {manualPagination ? (
-        <TableSpinner position={headerAxis === 'x' ? 'bottom' : 'right'} hidden={!isFetching} />
-      ) : null}
-      <TableNavigationButton
-        position={headerAxis === 'x' ? 'bottom' : 'right'}
-        hidden={isFetching || (manualPagination ? !getCanNextPage() : !table.getCanNextPage())}
-        clickHandler={getNextPage}
-      />
-    </ScrollableContainer>
-  )
-}
-
-interface IProps extends ITableConfig, IPaginationProps, ITableDimensionProps {
-  tableData: TableData
-}
-
-export interface ITableConfig {
-  staticColumns?: 0 | 1 | 2
-  headerAxis?: Axis
-  enableSorting?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  sortingFunctions?: Record<string, SortingFn<any>> | undefined
-}
-
-export interface IPaginationProps {
-  currentPage?: number
-  pageSize?: number
-  manualPagination?: boolean
-  nextPage?: () => void
-  getCanNextPage?: () => boolean
-  isFetching?: boolean
-  keepPreviousData?: boolean
-}
-
-export interface ITableDimensionProps {
-  maxWidth?: string
-  maxHeight?: string
-  isFlex?: boolean
-}
-
-type DataEntity = Record<string, CellProps | DataEntity[]> & {
-  subRows?: DataEntity[]
-}
-
-interface Header {
-  type: 'accessor' | 'group' | 'display'
-  id: string
-  cellProps: CellProps
-  subHeaders?: Header[]
-}
-
-interface TableData {
-  headers: Header[]
-  rows: DataEntity[]
-}
-
-export default Table
-export { DataEntity, CellProps, Header, TableData }
+import { FC, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  getCoreRowModel,
+  useReactTable,
+  getExpandedRowModel,
+  getSortedRowModel,
+  ExpandedState,
+  SortingState,
+  PaginationState,
+  ColumnDef,
+  SortingFn,
+} from '@tanstack/react-table'
+import { Axis } from '@ltht-react/types'
+import { ScrollableContainer } from './table-styled-components'
+import useScrollRef from './useScrollRef'
+import { handleDataUpdate, handleDataUpdateForManualPagination, handleScrollEvent } from './table-methods'
+import TableComponent, { TableNavigationButton, TableSpinner } from './table-component'
+import { CellProps } from './table-cell'
+
+const Table: FC<IProps> = ({
+  tableData,
+  staticColumns = 0,
+  currentPage = 1,
+  pageSize: pageSizeParam = 10,
+  headerAxis = 'x',
+  manualPagination = false,
+  getCanNextPage = () => false,
+  nextPage = () => null,
+  isFetching = false,
+  keepPreviousData = false,
+  maxHeight,
+  maxWidth,
+  isFlex = false,
+  enableSorting = true,
+  sortingFunctions = undefined,
+}) => {
+  const scrollableDivElement = useRef(null)
+  const scrollState = useScrollRef(scrollableDivElement)
+
+  const [expanded, setExpanded] = useState<ExpandedState>({})
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: currentPage - 1,
+    pageSize: pageSizeParam,
+  })
+
+  const pagination = useMemo(() => ({ pageIndex, pageSize }), [pageIndex, pageSize])
+  const [data, setData] = useState<DataEntity[]>([])
+  const [columns, setColumns] = useState<ColumnDef<DataEntity>[]>([])
+  const [pageCount, setPageCount] = useState<number>(-1)
+
+  useEffect(() => {
+    if (!manualPagination) {
+      handleDataUpdate(tableData, pageIndex, pageSize, headerAxis, setColumns, setData, setPageCount)
+    }
+  }, [pageIndex, pageSize, headerAxis, tableData, manualPagination])
+
+  useEffect(() => {
+    if (manualPagination) {
+      handleDataUpdateForManualPagination(tableData, headerAxis, keepPreviousData, setColumns, setData)
+    }
+  }, [headerAxis, tableData, manualPagination, keepPreviousData])
+
+  const table = useReactTable({
+    data,
+    columns,
+    ...(!manualPagination ? { pageCount } : {}),
+    state: {
+      expanded,
+      sorting,
+      ...(!manualPagination ? { pagination } : {}),
+    },
+    manualPagination: true,
+    onExpandedChange: setExpanded,
+    onSortingChange: setSorting,
+    enableSorting,
+    sortingFns: sortingFunctions,
+    getSubRows: (row) => row.subRows,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(!manualPagination ? { onPaginationChange: setPagination } : {}),
+  })
+
+  useEffect(() => {
+    if (!scrollState) {
+      return
+    }
+
+    if (!manualPagination) {
+      handleScrollEvent(table, headerAxis, scrollState)
+    }
+  }, [scrollState, table, headerAxis, manualPagination])
+
+  const getNextPage = () => {
+    if (manualPagination) {
+      nextPage()
+    } else {
+      table.nextPage()
+    }
+  }
+
+  return (
+    <ScrollableContainer
+      ref={scrollableDivElement}
+      tableHeaderAxis={headerAxis}
+      {...{ maxHeight, maxWidth }}
+      isFlex={isFlex}
+    >
+      <TableComponent table={table} staticColumns={staticColumns} headerAxis={headerAxis} />
+      {manualPagination ? (
+        <TableSpinner position={headerAxis === 'x' ? 'bottom' : 'right'} hidden={!isFetching} />
+      ) : null}
+      <TableNavigationButton
+        position={headerAxis === 'x' ? 'bottom' : 'right'}
+        hidden={isFetching || (manualPagination ? !getCanNextPage() : !table.getCanNextPage())}
+        clickHandler={getNextPage}
+      />
+    </ScrollableContainer>
+  )
+}
+
+interface IProps extends ITableConfig, IPaginationProps, ITableDimensionProps {
+  tableData: TableData
+}
+
+export interface ITableConfig {
+  staticColumns?: 0 | 1 | 2
+  headerAxis?: Axis
+  enableSorting?: boolean
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sortingFunctions?: Record<string, SortingFn<any>> | undefined
+}
+
+export interface IPaginationProps {
+  currentPage?: number
+  pageSize?: number
+  manualPagination?: boolean
+  nextPage?: () => void
+  getCanNextPage?: () => boolean
+  isFetching?: boolean
+  keepPreviousData?: boolean
+}
+
+export interface ITableDimensionProps {
+  maxWidth?: string
+  maxHeight?: string
+  isFlex?: boolean
+}
+
+type DataEntity = Record<string, CellProps | DataEntity[]> & {
+  subRows?: DataEntity[]
+}
+
+interface Header {
+  type: 'accessor' | 'group' | 'display'
+  id: string
+  cellProps: CellProps
+  subHeaders?: Header[]
+}
+
+interface TableData {
+  headers: Header[]
+  rows: DataEntity[]
+}
+
+export default Table
+export { DataEntity, CellProps, Header, TableData }

package/src/molecules/useDimensionRef.tsx

@@ -1,37 +1,37 @@
-import { useEffect, useState } from 'react'
-
-const useDimensionsRef = (elementRef: React.RefObject<HTMLElement>, parentElementRef: React.RefObject<HTMLElement>) => {
-  const [dimensions, setDimensions] = useState({
-    width: 0,
-    height: 0,
-  })
-
-  useEffect(() => {
-    const getDimensions = () => ({
-      width: (elementRef && elementRef.current && elementRef.current.offsetWidth) || 0,
-      height: (elementRef && elementRef.current && elementRef.current.offsetHeight) || 0,
-    })
-
-    const handleResize = () => {
-      setDimensions(getDimensions())
-    }
-
-    if (elementRef.current) {
-      setDimensions(getDimensions())
-    }
-
-    const parentElementResizeObserver = new ResizeObserver((_e: ResizeObserverEntry[]) => handleResize())
-
-    if (parentElementRef?.current) {
-      parentElementResizeObserver.observe(parentElementRef.current)
-    }
-
-    return () => {
-      parentElementResizeObserver?.disconnect()
-    }
-  }, [elementRef, parentElementRef])
-
-  return dimensions
-}
-
-export default useDimensionsRef
+import { useEffect, useState } from 'react'
+
+const useDimensionsRef = (elementRef: React.RefObject<HTMLElement>, parentElementRef: React.RefObject<HTMLElement>) => {
+  const [dimensions, setDimensions] = useState({
+    width: 0,
+    height: 0,
+  })
+
+  useEffect(() => {
+    const getDimensions = () => ({
+      width: (elementRef && elementRef.current && elementRef.current.offsetWidth) || 0,
+      height: (elementRef && elementRef.current && elementRef.current.offsetHeight) || 0,
+    })
+
+    const handleResize = () => {
+      setDimensions(getDimensions())
+    }
+
+    if (elementRef.current) {
+      setDimensions(getDimensions())
+    }
+
+    const parentElementResizeObserver = new ResizeObserver((_e: ResizeObserverEntry[]) => handleResize())
+
+    if (parentElementRef?.current) {
+      parentElementResizeObserver.observe(parentElementRef.current)
+    }
+
+    return () => {
+      parentElementResizeObserver?.disconnect()
+    }
+  }, [elementRef, parentElementRef])
+
+  return dimensions
+}
+
+export default useDimensionsRef

package/src/molecules/useScrollRef.tsx

@@ -1,36 +1,36 @@
-import { useEffect, useState } from 'react'
-
-const useScrollRef = (elementRef: React.RefObject<HTMLElement>) => {
-  const [scrollState, setScrollState] = useState<ScrollState>()
-  const element = elementRef.current
-
-  useEffect(() => {
-    const getScrollState = (): ScrollState => ({
-      scrollWidth: element?.scrollWidth ?? 0,
-      scrollHeight: element?.scrollHeight ?? 0,
-      currentXScroll: (element?.scrollLeft ?? 0) + (element?.clientWidth ?? 0),
-      currentYScroll: (element?.scrollTop ?? 0) + (element?.clientHeight ?? 0),
-    })
-
-    const handleScroll = () => {
-      setScrollState(getScrollState())
-    }
-
-    element?.addEventListener('scroll', handleScroll)
-
-    return () => {
-      element?.removeEventListener('scroll', handleScroll)
-    }
-  }, [element])
-
-  return scrollState
-}
-
-export interface ScrollState {
-  scrollWidth: number
-  scrollHeight: number
-  currentXScroll: number
-  currentYScroll: number
-}
-
-export default useScrollRef
+import { useEffect, useState } from 'react'
+
+const useScrollRef = (elementRef: React.RefObject<HTMLElement>) => {
+  const [scrollState, setScrollState] = useState<ScrollState>()
+  const element = elementRef.current
+
+  useEffect(() => {
+    const getScrollState = (): ScrollState => ({
+      scrollWidth: element?.scrollWidth ?? 0,
+      scrollHeight: element?.scrollHeight ?? 0,
+      currentXScroll: (element?.scrollLeft ?? 0) + (element?.clientWidth ?? 0),
+      currentYScroll: (element?.scrollTop ?? 0) + (element?.clientHeight ?? 0),
+    })
+
+    const handleScroll = () => {
+      setScrollState(getScrollState())
+    }
+
+    element?.addEventListener('scroll', handleScroll)
+
+    return () => {
+      element?.removeEventListener('scroll', handleScroll)
+    }
+  }, [element])
+
+  return scrollState
+}
+
+export interface ScrollState {
+  scrollWidth: number
+  scrollHeight: number
+  currentXScroll: number
+  currentYScroll: number
+}
+
+export default useScrollRef

package/src/organisms/generic-table.tsx

@@ -1,33 +1,33 @@
-import Table, { IPaginationProps, ITableDimensionProps, ITableConfig, TableData } from '../molecules/table'
-
-const GenericTable = <TColumn, TRow>({
-  columnData,
-  rowData,
-  mapToTableData,
-  headerAxis = 'x',
-  pageSize = 10,
-  currentPage = 1,
-  keepPreviousData = true,
-  ...props
-}: IProps<TColumn, TRow>) => {
-  const tableData = mapToTableData(columnData, rowData)
-
-  return (
-    <Table
-      tableData={tableData}
-      headerAxis={headerAxis}
-      pageSize={pageSize}
-      currentPage={currentPage}
-      keepPreviousData={keepPreviousData}
-      {...props}
-    />
-  )
-}
-
-interface IProps<TColumn, TRow> extends ITableConfig, IPaginationProps, ITableDimensionProps {
-  columnData: TColumn
-  rowData: TRow
-  mapToTableData: (colData: TColumn, rowData: TRow) => TableData
-}
-
-export default GenericTable
+import Table, { IPaginationProps, ITableDimensionProps, ITableConfig, TableData } from '../molecules/table'
+
+const GenericTable = <TColumn, TRow>({
+  columnData,
+  rowData,
+  mapToTableData,
+  headerAxis = 'x',
+  pageSize = 10,
+  currentPage = 1,
+  keepPreviousData = true,
+  ...props
+}: IProps<TColumn, TRow>) => {
+  const tableData = mapToTableData(columnData, rowData)
+
+  return (
+    <Table
+      tableData={tableData}
+      headerAxis={headerAxis}
+      pageSize={pageSize}
+      currentPage={currentPage}
+      keepPreviousData={keepPreviousData}
+      {...props}
+    />
+  )
+}
+
+interface IProps<TColumn, TRow> extends ITableConfig, IPaginationProps, ITableDimensionProps {
+  columnData: TColumn
+  rowData: TRow
+  mapToTableData: (colData: TColumn, rowData: TRow) => TableData
+}
+
+export default GenericTable