@takaro/lib-components 0.0.1

package/src/components/data/Table/index.tsx

@@ -0,0 +1,365 @@
+/// <reference path="./react-table.d.ts" />
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Density } from '../../../styled';
+import { Th } from './subcomponents/ColumnHeader/style';
+
+import {
+  flexRender,
+  getCoreRowModel,
+  OnChangeFn,
+  PaginationState,
+  useReactTable,
+  ColumnDef,
+  SortingState,
+  ColumnOrderState,
+  VisibilityState,
+  ColumnPinningState,
+  RowSelectionState,
+} from '@tanstack/react-table';
+import { Wrapper, StyledTable, Toolbar, PaginationContainer, Flex, TableWrapper } from './style';
+import { Empty, Spinner, ToggleButtonGroup } from '../../../components';
+import { AiOutlinePicCenter as RelaxedDensityIcon, AiOutlinePicRight as TightDensityIcon } from 'react-icons/ai';
+import { ColumnHeader, ColumnVisibility, Filter, Pagination } from './subcomponents';
+import { ColumnFilter, PageOptions } from '../../../hooks/useTableActions';
+import { GenericCheckBox as CheckBox } from '../../inputs/CheckBox/Generic';
+import { useLocalStorage } from '../../../hooks';
+
+export interface TableProps<DataType extends object> {
+  id: string;
+
+  data: DataType[];
+
+  isLoading?: boolean;
+
+  // currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<DataType, any>[];
+
+  /// Renders actions that are always visible
+  renderToolbar?: () => JSX.Element;
+
+  /// Renders actions that are only visible when one or more rows are selected.
+  renderRowSelectionActions?: () => JSX.Element;
+
+  title?: string;
+
+  rowSelection?: {
+    rowSelectionState: RowSelectionState;
+    setRowSelectionState: OnChangeFn<RowSelectionState>;
+  };
+
+  sorting: {
+    sortingState: SortingState;
+    setSortingState?: OnChangeFn<SortingState>;
+  };
+  pagination?: {
+    paginationState: PaginationState;
+    setPaginationState: OnChangeFn<PaginationState>;
+    pageOptions: PageOptions;
+  };
+  columnFiltering: {
+    columnFiltersState: ColumnFilter[];
+    setColumnFiltersState: Dispatch<SetStateAction<ColumnFilter[]>>;
+  };
+  columnSearch: {
+    columnSearchState: ColumnFilter[];
+    setColumnSearchState: OnChangeFn<ColumnFilter[]>;
+  };
+}
+
+export function Table<DataType extends object>({
+  id,
+  data,
+  columns,
+  sorting,
+  pagination,
+  columnFiltering,
+  title,
+  rowSelection,
+  columnSearch,
+  renderToolbar,
+  renderRowSelectionActions,
+  isLoading = false,
+}: TableProps<DataType>) {
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(() => {
+    return columns.reduce((acc, column) => {
+      if (column.id === undefined) {
+        throw new Error('ColumnDef must have an id');
+      }
+      acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
+      return acc;
+    }, {} as Record<string, boolean>);
+  });
+  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({});
+  const { storedValue: density, setValue: setDensity } = useLocalStorage<Density>(`table-density-${id}`, 'tight');
+
+  const [openColumnVisibilityTooltip, setOpenColumnVisibilityTooltip] = useState<boolean>(false);
+  const [hasShownColumnVisibilityTooltip, setHasShownColumnVisibilityTooltip] = useState<boolean>(false);
+  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(
+    columns.map((column) => {
+      if (column.id === undefined) {
+        throw new Error('ColumnDef must have an id');
+      }
+      return column.id;
+    })
+  );
+
+  const ROW_SELECTION_COL_SPAN = rowSelection ? 1 : 0;
+
+  // table size
+  useEffect(() => {
+    if (density === 'tight') {
+      table.setPageSize(19);
+    } else {
+      table.resetPageSize(true);
+    }
+  }, [density]);
+
+  // handles the column visibility tooltip (shows tooltip when the first column is hidden)
+  useEffect(() => {
+    if (
+      !hasShownColumnVisibilityTooltip &&
+      Object.values(columnVisibility).filter((visible) => visible === false).length === 1
+    ) {
+      setOpenColumnVisibilityTooltip(true);
+      setHasShownColumnVisibilityTooltip(true);
+
+      setTimeout(() => {
+        setOpenColumnVisibilityTooltip(false);
+      }, 3000);
+    }
+  }, [columnVisibility, hasShownColumnVisibilityTooltip]);
+
+  useEffect(() => {
+    // whenever the data changes, remove the selection
+    if (rowSelection) {
+      rowSelection.setRowSelectionState({});
+    }
+  }, [data]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    pageCount: pagination?.pageOptions.pageCount ?? -1,
+    manualPagination: true,
+    paginateExpandedRows: true, // Expanded rows will be paginated this means that rows that take up more space will be shown on next page.
+    manualFiltering: true,
+    manualSorting: true,
+    enableExpanding: true,
+    enableFilters: true,
+    enableColumnFilters: !!columnFiltering,
+    enableGlobalFilter: !!columnSearch,
+    enableSorting: !!sorting,
+    enableSortingRemoval: false,
+    enableColumnResizing: true,
+    enableHiding: !!columnVisibility,
+    enableRowSelection: !!rowSelection,
+    autoResetPageIndex: false,
+
+    columnResizeMode: 'onChange',
+    onColumnVisibilityChange: setColumnVisibility,
+    onSortingChange: sorting?.setSortingState,
+    onPaginationChange: pagination?.setPaginationState,
+    onColumnFiltersChange: (filters) => columnFiltering?.setColumnFiltersState(filters as ColumnFilter[]),
+    onGlobalFilterChange: (filters) => columnSearch?.setColumnSearchState(filters as ColumnFilter[]),
+    onColumnOrderChange: setColumnOrder,
+    onColumnPinningChange: setColumnPinning,
+    onRowSelectionChange: rowSelection ? rowSelection?.setRowSelectionState : undefined,
+
+    initialState: {
+      columnVisibility: columnVisibility,
+      sorting: sorting.sortingState,
+      columnFilters: columnFiltering.columnFiltersState,
+      globalFilter: columnSearch.columnSearchState,
+      pagination: pagination?.paginationState,
+      rowSelection: rowSelection ? rowSelection.rowSelectionState : undefined,
+    },
+
+    state: {
+      columnVisibility,
+      columnOrder,
+      sorting: sorting?.sortingState,
+      columnFilters: columnFiltering?.columnFiltersState,
+      globalFilter: columnSearch?.columnSearchState,
+      pagination: pagination?.paginationState,
+      rowSelection: rowSelection ? rowSelection.rowSelectionState : undefined,
+      columnPinning,
+    },
+  });
+
+  // rowSelection.rowSelectionState has the following shape: { [rowId: string]: boolean }
+  const hasRowSelection = useMemo(() => {
+    return (
+      rowSelection &&
+      Object.keys(rowSelection.rowSelectionState).filter((key) => rowSelection.rowSelectionState[key]).length > 0
+    );
+  }, [rowSelection?.rowSelectionState]);
+
+  return (
+    <Wrapper>
+      <Toolbar role="toolbar">
+        {/* custom toolbar is rendered on left side*/}
+        <Flex>
+          {!hasRowSelection && title && <h2>{title}</h2>}
+          {hasRowSelection && renderRowSelectionActions && renderRowSelectionActions()}
+        </Flex>
+        <Flex>
+          {renderToolbar && renderToolbar()}
+          {!isLoading && <Filter table={table} />}
+          <ColumnVisibility
+            table={table}
+            setHasShownColumnVisibilityTooltip={setHasShownColumnVisibilityTooltip}
+            openColumnVisibilityTooltip={openColumnVisibilityTooltip}
+            setOpenColumnVisibilityTooltip={setOpenColumnVisibilityTooltip}
+            hasShownColumnVisibilityTooltip={hasShownColumnVisibilityTooltip}
+          />
+          <ToggleButtonGroup
+            onChange={(val) => setDensity(val as Density)}
+            exclusive={true}
+            orientation="horizontal"
+            defaultValue={density}
+          >
+            <ToggleButtonGroup.Button value="relaxed" tooltip="Relaxed layout">
+              <RelaxedDensityIcon size={20} />
+            </ToggleButtonGroup.Button>
+            <ToggleButtonGroup.Button value="tight" tooltip="Tight layout">
+              <TightDensityIcon size={20} />
+            </ToggleButtonGroup.Button>
+          </ToggleButtonGroup>
+        </Flex>
+      </Toolbar>
+
+      {/* table */}
+      <DndProvider backend={HTML5Backend}>
+        <TableWrapper>
+          <StyledTable density={density}>
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {rowSelection && table.getRowModel().rows.length !== 0 && !isLoading && (
+                    <Th
+                      isActive={false}
+                      isRight={false}
+                      isDragging={false}
+                      canDrag={false}
+                      isRowSelection={true}
+                      width={10}
+                    >
+                      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <CheckBox
+                          hasDescription={false}
+                          hasError={false}
+                          id={`select-all-header-${headerGroup.id}`}
+                          name={`select-all-header-${headerGroup.id}`}
+                          onChange={() => table.toggleAllRowsSelected()}
+                          size="small"
+                          value={table.getIsAllRowsSelected()}
+                        />
+                      </div>
+                    </Th>
+                  )}
+                  {headerGroup.headers.map((header) => (
+                    <ColumnHeader
+                      header={header}
+                      table={table}
+                      isLoading={isLoading}
+                      key={`draggable-column-header-${header.id}`}
+                    />
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {/* loading state */}
+              {isLoading && (
+                <tr>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '15px' }}>
+                      <Spinner size="small" />
+                    </div>
+                  </td>
+                </tr>
+              )}
+
+              {/* empty state */}
+              {!isLoading && table.getRowModel().rows.length === 0 && (
+                <tr>
+                  <td colSpan={table.getAllColumns().length + ROW_SELECTION_COL_SPAN}>
+                    <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <Empty header="No data" description="We couldn't find what you are looking for." actions={[]} />
+                    </div>
+                  </td>
+                </tr>
+              )}
+
+              {!isLoading &&
+                table.getRowModel().rows.map((row) => (
+                  <tr key={row.id}>
+                    {row.getCanSelect() && (
+                      <td style={{ paddingRight: '10px', width: '15px' }}>
+                        <CheckBox
+                          value={row.getIsSelected()}
+                          id={row.id}
+                          name={row.id}
+                          hasError={false}
+                          disabled={!row.getCanSelect()}
+                          onChange={() => row.toggleSelected()}
+                          hasDescription={false}
+                          size="small"
+                        />
+                      </td>
+                    )}
+                    {row.getVisibleCells().map(({ column, id, getContext }) => (
+                      <td key={id}>{flexRender(column.columnDef.cell, getContext())}</td>
+                    ))}
+                    {row.getIsExpanded() && (
+                      <tr>
+                        <td colSpan={table.getVisibleLeafColumns().length} />
+                      </tr>
+                    )}
+                  </tr>
+                ))}
+            </tbody>
+            {!isLoading && table.getRowModel().rows.length > 1 && (
+              <tfoot>
+                <tr>
+                  <td colSpan={1} />
+                  {pagination && (
+                    <td
+                      colSpan={
+                        columns.length +
+                        ROW_SELECTION_COL_SPAN /* +1 here is because we have an extra column for the selection */ -
+                        2 /* We use 2 columns for padding (1 start one at end) */
+                      }
+                    >
+                      <PaginationContainer>
+                        <span>
+                          showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-
+                          {table.getState().pagination.pageIndex * table.getState().pagination.pageSize +
+                            table.getRowModel().rows.length}{' '}
+                          of {pagination.pageOptions.total} entries
+                        </span>
+                        <Pagination
+                          pageCount={table.getPageCount()}
+                          hasNext={table.getCanNextPage()}
+                          hasPrevious={table.getCanPreviousPage()}
+                          previousPage={table.previousPage}
+                          nextPage={table.nextPage}
+                          pageIndex={table.getState().pagination.pageIndex}
+                          setPageIndex={table.setPageIndex}
+                        />
+                      </PaginationContainer>
+                    </td>
+                  )}
+                </tr>
+              </tfoot>
+            )}
+          </StyledTable>
+        </TableWrapper>
+      </DndProvider>
+    </Wrapper>
+  );
+}

package/src/components/data/Table/react-table.d.ts

@@ -0,0 +1,11 @@
+// IMPORTANT: this needs to be mirrored in web-main/src/react-table.d.ts
+import '@tanstack/react-table';
+
+type DataTypes = 'datetime' | 'number' | 'string' | 'boolean' | 'uuid';
+
+declare module '@tanstack/table-core' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    hiddenColumn?: boolean;
+    dataType?: DataTypes;
+  }
+}

package/src/components/data/Table/style.ts

@@ -0,0 +1,75 @@
+import { Density, styled } from '../../../styled';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  overflow-x: auto;
+`;
+
+export const Toolbar = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing[1]};
+  gap: 1rem;
+  border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-right: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  border-top-left-radius: ${({ theme }) => theme.borderRadius.large};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const Flex = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing[1]};
+`;
+
+export const TableWrapper = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent}};
+  padding-bottom: ${({ theme }) => theme.spacing['0_5']};
+  border-bottom-left-radius: ${({ theme }) => theme.borderRadius.large};
+  border-bottom-right-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const StyledTable = styled.table<{ density: Density }>`
+  /* NOTE: The table heading style (th) is in ColumnHeader's styles */
+  width: 100%;
+  text-align: left;
+  background-color: ${({ theme }) => theme.colors.background};
+  overflow: hidden;
+  border-collapse: collapse;
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  td {
+    border-right: none;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    padding: ${({ theme, density }) =>
+      density === 'tight' ? `${theme.spacing['0_5']} 0` : `${theme.spacing['1_5']} 0`};
+
+    &:first-child {
+      padding-left: ${({ theme }) => theme.spacing['1']};
+    }
+  }
+
+  tfoot {
+    border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    padding: ${({ theme }) => theme.spacing[2]};
+    tr {
+      td {
+        border-bottom: none;
+        padding-top: ${({ theme }) => theme.spacing[2]};
+      }
+    }
+  }
+`;
+
+export const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;

package/src/components/data/Table/subcomponents/ColumnHeader/ColumnSettings.tsx

@@ -0,0 +1,161 @@
+import { Header, Table } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import {
+  AiOutlineSortAscending as SortAscendingIcon,
+  AiOutlineSortDescending as SortDescendingIcon,
+  AiOutlineEyeInvisible as HideFieldIcon,
+  AiOutlinePushpin as PinIcon,
+  AiOutlineDelete as DeleteIcon,
+} from 'react-icons/ai';
+import { HiOutlineDotsHorizontal as MenuIcon } from 'react-icons/hi';
+import { Dropdown, IconButton, Tooltip } from '../../../../../components';
+import { MenuTrigger } from './style';
+
+interface ColumnSettingsProps<DataType extends object> {
+  header: Header<DataType, unknown>;
+  table: Table<DataType>;
+  columnIsHovered: boolean;
+}
+
+export function ColumnSettings<DataType extends object>({
+  header,
+  table,
+  columnIsHovered,
+}: ColumnSettingsProps<DataType>) {
+  const toggleSorting = (desc: boolean) => {
+    table.setSorting(() => [{ id: header.column.id, desc }]);
+  };
+  const removeSorting = () => {
+    table.setSorting((prev) => [...prev.filter((sort) => sort.id !== header.column.id)]);
+  };
+
+  const sortingToggle = useMemo(() => {
+    const sort = table.getState().sorting.find((sort) => sort.id === header.column.id);
+
+    if (sort) {
+      if (sort.desc) {
+        return (
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <IconButton
+                icon={<SortDescendingIcon />}
+                ariaLabel="toggle to ascending"
+                onClick={() => toggleSorting(false)}
+              />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Toggle to ascending</Tooltip.Content>
+          </Tooltip>
+        );
+      } else {
+        return (
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <IconButton
+                icon={<SortAscendingIcon />}
+                ariaLabel="toggle to descending"
+                onClick={() => toggleSorting(true)}
+              />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Toggle to descending</Tooltip.Content>
+          </Tooltip>
+        );
+      }
+    }
+  }, [table.getState().sorting, header.column.id]);
+
+  return (
+    <div>
+      {sortingToggle}
+      {header.column.getIsPinned() === 'left' && (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <IconButton icon={<PinIcon />} ariaLabel="Unpin column" onClick={() => header.column.pin(false)} />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Unpin column</Tooltip.Content>
+        </Tooltip>
+      )}
+      {header.column.getIsPinned() === 'right' && (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <IconButton
+              icon={<PinIcon style={{ transform: 'scaleX(-1)' }} />}
+              ariaLabel="Unpin column"
+              onClick={() => header.column.pin(false)}
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Unpin column</Tooltip.Content>
+        </Tooltip>
+      )}
+      <Dropdown>
+        <Dropdown.Trigger asChild>
+          <MenuTrigger isVisible={columnIsHovered}>
+            <IconButton icon={<MenuIcon />} ariaLabel="column settings" />
+          </MenuTrigger>
+        </Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Menu.Group divider>
+            <Dropdown.Menu.Item
+              icon={<SortAscendingIcon />}
+              onClick={() => {
+                if (table.getState().sorting.some((sort) => sort.id === header.column.id && !sort.desc)) {
+                  removeSorting();
+                } else {
+                  toggleSorting(false);
+                  /* TODO: WHENEVER sorting multiple columns at once is supported, should first, try to find the id, update if found, add if not found*/
+                  //table.setSorting((prev) => [...prev, { id: column.id, desc: false }]);
+                }
+              }}
+              active={table.getState().sorting.some((sort) => sort.id === header.column.id && !sort.desc)}
+              label="Sort ascending (A..Z)"
+              disabled={!header.column.getCanSort()}
+            />
+            <Dropdown.Menu.Item
+              icon={<SortDescendingIcon />}
+              onClick={() => {
+                if (table.getState().sorting.some((sort) => sort.id === header.column.id && sort.desc)) {
+                  removeSorting();
+                } else {
+                  toggleSorting(true);
+                }
+              }}
+              disabled={!header.column.getCanSort()}
+              active={table.getState().sorting.some((sort) => sort.id === header.column.id && sort.desc)}
+              label="Sort descending (Z..A)"
+            />
+          </Dropdown.Menu.Group>
+          <Dropdown.Menu.Item
+            active={header.column.getIsPinned() === 'left'}
+            disabled={!header.column.getCanPin()}
+            icon={<PinIcon />}
+            label="Pin to left"
+            onClick={() => {
+              !header.column.getIsPinned() && header.column.getCanPin()
+                ? header.column.pin('left')
+                : header.column.pin(false);
+            }}
+          />
+          <Dropdown.Menu.Item
+            active={header.column.getIsPinned() === 'right'}
+            disabled={!header.column.getCanPin()}
+            icon={<PinIcon style={{ transform: 'scaleX(-1)' }} />}
+            label="Pin to right"
+            onClick={() => {
+              !header.column.getIsPinned() && header.column.getCanPin()
+                ? header.column.pin('right')
+                : header.column.pin(false);
+            }}
+          />
+          <Dropdown.Menu.Item disabled={true} icon={<DeleteIcon />} label="Delete column" onClick={() => {}} />
+          <Dropdown.Menu.Item
+            icon={<HideFieldIcon />}
+            disabled={!header.column.getCanHide()}
+            onClick={() => {
+              header.column.toggleVisibility(false);
+            }}
+            label="Hide column"
+          />
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+}