@ltht-react/table 2.0.2 → 2.0.4

package/src/molecules/table-styled-components.tsx

@@ -0,0 +1,233 @@
+import {
+  CSS_RESET,
+  TRANSLUCENT_MID_GREY,
+  SCROLLBAR,
+  TRANSLUCENT_BRIGHT_BLUE,
+  BTN_COLOURS,
+  TABLE_COLOURS,
+  StickyTableData,
+  StickyTableHead,
+  getZIndex,
+} from '@ltht-react/styles'
+import styled from '@emotion/styled'
+import Icon, { IconButton } from '@ltht-react/icon'
+import { Axis } from '@ltht-react/types'
+
+const ScrollableContainer = styled.div<IScrollableContainer>`
+  ${CSS_RESET};
+  background-color: white;
+  ${({ tableHeaderAxis, maxWidth, maxHeight }) => `
+    display: ${tableHeaderAxis === 'y' ? 'inline-flex' : 'inline-block'};
+    max-width: ${maxWidth ?? '100%'};
+    max-height: ${maxHeight ?? '100%'};
+  `}
+  border-radius: 6px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+    border: 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${SCROLLBAR};
+    border-radius: 10px;
+  }
+`
+const StyledTable = styled.table`
+  border-spacing: 0px;
+  border-radius: 6px;
+`
+const StyledTableHeader = styled.th<IStyledTableCell>`
+  background-color: ${TABLE_COLOURS.HEADER};
+  border: thin solid ${TABLE_COLOURS.BORDER};
+  font-weight: bold;
+  padding: 0.5rem;
+
+  ${({ stickyWidth }) =>
+    stickyWidth !== undefined &&
+    `
+    position: sticky !important;
+    left: ${stickyWidth}px;
+    top: 0;
+    z-index: ${getZIndex(StickyTableData)};`}
+`
+const StyledTableData = styled.td<IStyledTableCell>`
+  border: thin solid ${TABLE_COLOURS.BORDER};
+  white-space: normal;
+  text-align: center;
+  padding: 0.15rem;
+
+  &:first-of-type {
+    background-color: ${TABLE_COLOURS.HEADER} !important;
+    font-weight: bold;
+  }
+
+  ${({ stickyWidth }) =>
+    stickyWidth !== undefined &&
+    `
+    background-color: ${TABLE_COLOURS.STRIPE_LIGHT};
+    position: sticky !important;
+    left: ${stickyWidth}px;
+    top: 0;
+    z-index: ${getZIndex(StickyTableData)};`}
+
+  ${({ tableHeaderAxis }) =>
+    tableHeaderAxis === 'y' &&
+    `
+    &:nth-of-type(even) {
+      background-color: ${TABLE_COLOURS.STRIPE_DARK};
+    }`}
+`
+const StyledTableRow = styled.tr<IStyledTableCell>`
+  ${({ tableHeaderAxis }) =>
+    tableHeaderAxis === 'x' &&
+    `
+    &:nth-of-type(odd) {
+      background-color: ${TABLE_COLOURS.STRIPE_DARK};
+    }`}
+`
+const PaginationContainer = styled.div`
+  ${CSS_RESET};
+  margin-top: 5px;
+  display: block;
+`
+const StyledPaginationPageInput = styled.input`
+  ${CSS_RESET};
+  width: 50px;
+  border: 1px solid gray;
+`
+const StyledPaginationPageSelect = styled.select`
+  ${CSS_RESET};
+  width: 45px;
+  display: inline-block;
+  font-size: 0.9rem;
+  border: 1px solid gray;
+`
+const StyledHideOnMobile = styled.span`
+  font-size: 1.1em;
+  padding: 2px;
+  @media (max-width: 320px) {
+    display: none;
+  }
+`
+const StyledPaginationButtonDiv = styled.div`
+  float: right;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+`
+const StyledPageCountDiv = styled.div`
+  margin-right: 5px;
+  margin-left: 5px;
+  display: flex;
+  font-size: 1.1em;
+  padding: 1px;
+`
+const StyledStandardButton = styled(IconButton)`
+  color: ${BTN_COLOURS.STANDARD.TEXT};
+  background-color: ${BTN_COLOURS.STANDARD.VALUE};
+  padding: 2px 5px;
+  border-radius: 5px;
+  &:hover {
+    background-color: ${BTN_COLOURS.STANDARD.HOVER};
+  }
+
+  &:disabled {
+    background-color: ${BTN_COLOURS.STANDARD.DISABLED};
+  }
+`
+const StyledPaginationButton = styled(IconButton)`
+  padding: 2px 5px;
+  background-color: ${TRANSLUCENT_BRIGHT_BLUE};
+  color: black;
+  border: 1px solid ${TRANSLUCENT_MID_GREY};
+  margin: 0 2.5px;
+  border-radius: 3px;
+
+  &:disabled {
+    background-color: inherit;
+    color: gray;
+    border-color: ${TRANSLUCENT_MID_GREY};
+    pointer-events: none;
+  }
+`
+const StyledSpinnerIcon = styled(Icon)`
+  margin: 3px 0;
+  font-size: 1.1em;
+  padding: 1.5px;
+`
+const StyledNextPageButtonContainer = styled.div<IStyledNextPageButtonContainer>`
+  display: ${({ hidden, elementPosition }) => {
+    if (!hidden) {
+      return elementPosition === 'bottom' ? 'flex' : 'inline-flex'
+    }
+
+    return 'none'
+  }};
+  justify-content: center;
+  cursor: pointer;
+  align-items: center;
+  padding: 10px;
+  font-size: 1.3em;
+  border: solid 2px #eeeeee;
+  border-left: solid 1px #eeeeee;
+
+  :hover {
+    background-color: #f3f6f6;
+  }
+`
+
+const StyledSpinnerContainer = styled.div<IStyledNextPageButtonContainer>`
+  display: ${({ hidden, elementPosition }) => {
+    if (!hidden) {
+      return elementPosition === 'bottom' ? 'flex' : 'inline-flex'
+    }
+
+    return 'none'
+  }};
+  justify-content: center;
+  cursor: pointer;
+  align-items: center;
+  padding: 5px;
+`
+const StyledTHead = styled.thead`
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: ${getZIndex(StickyTableHead)};
+`
+
+interface IStyledTableCell {
+  stickyWidth?: number
+  tableHeaderAxis?: string
+}
+
+interface IStyledNextPageButtonContainer {
+  elementPosition: 'right' | 'bottom'
+}
+
+interface IScrollableContainer {
+  tableHeaderAxis: Axis
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export {
+  StyledTable,
+  StyledTableHeader,
+  StyledTableRow,
+  StyledTableData,
+  PaginationContainer,
+  StyledPaginationPageInput,
+  StyledPaginationPageSelect,
+  StyledHideOnMobile,
+  StyledPaginationButton,
+  ScrollableContainer,
+  StyledPaginationButtonDiv,
+  StyledPageCountDiv,
+  StyledStandardButton,
+  StyledSpinnerIcon,
+  StyledNextPageButtonContainer,
+  StyledTHead,
+  StyledSpinnerContainer,
+}

package/src/molecules/table.tsx

@@ -0,0 +1,161 @@
+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,
+  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} />
+      {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
+}
+
+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

@@ -0,0 +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

package/src/molecules/useScrollRef.tsx

@@ -0,0 +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

package/src/organisms/generic-table.tsx

@@ -0,0 +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