@tanstack/react-table 0.0.1-alpha.0

package/src/features/Visibility.ts

@@ -0,0 +1,281 @@
+import {
+  Cell,
+  Column,
+  Getter,
+  OnChangeFn,
+  PropGetterValue,
+  ReactTable,
+  Updater,
+} from '../types'
+import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+
+export type VisibilityOptions = {
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+  enableHiding?: boolean
+}
+
+export type VisibilityDefaultOptions = {
+  onColumnVisibilityChange: OnChangeFn<VisibilityState>
+}
+
+export type VisibilityState = Record<string, boolean>
+
+export type VisibilityTableState = {
+  columnVisibility: VisibilityState
+}
+
+export type VisibilityInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  getVisibleFlatColumns: () => Column<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getVisibleLeafColumns: () => Column<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  setColumnVisibility: (updater: Updater<VisibilityState>) => void
+  toggleColumnVisibility: (columnId: string, value?: boolean) => void
+  toggleAllColumnsVisible: (value?: boolean) => void
+  getColumnIsVisible: (columId: string) => boolean
+  getColumnCanHide: (columnId: string) => boolean
+  getIsAllColumnsVisible: () => boolean
+  getIsSomeColumnsVisible: () => boolean
+  getToggleAllColumnsVisibilityProps: <
+    TGetter extends Getter<ToggleAllColumnsVisibilityProps>
+  >(
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<ToggleAllColumnsVisibilityProps, TGetter>
+}
+
+type ToggleVisibilityProps = {}
+type ToggleAllColumnsVisibilityProps = {}
+
+export type VisibilityColumnDef = {
+  enableHiding?: boolean
+  defaultCanHide?: boolean
+}
+
+export type VisibilityRow<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  getVisibleCells: () => Cell<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+}
+
+export type VisibilityColumn = {
+  getCanHide: () => boolean
+  getIsVisible: () => boolean
+  toggleVisibility: (value?: boolean) => void
+  getToggleVisibilityProps: <TGetter extends Getter<ToggleVisibilityProps>>(
+    userProps?: TGetter
+  ) => PropGetterValue<ToggleVisibilityProps, TGetter>
+}
+
+//
+
+export function getInitialState(): VisibilityTableState {
+  return {
+    columnVisibility: {},
+  }
+}
+
+export function getDefaultOptions<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): VisibilityDefaultOptions {
+  return {
+    onColumnVisibilityChange: makeStateUpdater('columnVisibility', instance),
+  }
+}
+
+export function getDefaultColumn() {
+  return {
+    defaultIsVisible: true,
+  }
+}
+
+export function createColumn<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): VisibilityColumn {
+  return {
+    getCanHide: () => instance.getColumnCanHide(column.id),
+    getIsVisible: () => instance.getColumnIsVisible(column.id),
+    toggleVisibility: value =>
+      instance.toggleColumnVisibility(column.id, value),
+    getToggleVisibilityProps: userProps => {
+      const props: ToggleVisibilityProps = {
+        type: 'checkbox',
+        checked: column.getIsVisible?.(),
+        title: 'Toggle Column Visibility',
+        onChange: (e: MouseEvent | TouchEvent) => {
+          column.toggleVisibility?.((e.target as HTMLInputElement).checked)
+        },
+      }
+
+      return propGetter(props, userProps)
+    },
+  }
+}
+
+export function getInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): VisibilityInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  return {
+    getVisibleFlatColumns: memo(
+      () => [
+        instance.getAllFlatColumns(),
+        instance
+          .getAllFlatColumns()
+          .filter(d => d.getIsVisible?.())
+          .map(d => d.id)
+          .join('_'),
+      ],
+      allFlatColumns => {
+        return allFlatColumns.filter(d => d.getIsVisible?.())
+      },
+      'getVisibleFlatColumns',
+      instance.options.debug
+    ),
+
+    getVisibleLeafColumns: memo(
+      () => [
+        instance.getAllLeafColumns(),
+        instance
+          .getAllLeafColumns()
+          .filter(d => d.getIsVisible?.())
+          .map(d => d.id)
+          .join('_'),
+      ],
+      allFlatColumns => {
+        return allFlatColumns.filter(d => d.getIsVisible?.())
+      },
+      'getVisibleLeafColumns',
+      instance.options.debug
+    ),
+
+    setColumnVisibility: updater =>
+      instance.options.onColumnVisibilityChange?.(
+        updater,
+        functionalUpdate(updater, instance.getState().columnVisibility)
+      ),
+
+    toggleColumnVisibility: (columnId, value) => {
+      if (!columnId) return
+
+      if (instance.getColumnCanHide(columnId)) {
+        instance.setColumnVisibility(old => ({
+          ...old,
+          [columnId]: value ?? !instance.getColumnIsVisible(columnId),
+        }))
+      }
+    },
+
+    toggleAllColumnsVisible: value => {
+      value = value ?? !instance.getIsAllColumnsVisible()
+
+      instance.setColumnVisibility(
+        instance.getAllLeafColumns().reduce(
+          (obj, column) => ({
+            ...obj,
+            [column.id]: !value ? !column.getCanHide?.() : value,
+          }),
+          {}
+        )
+      )
+    },
+
+    getColumnIsVisible: columnId => {
+      const column = instance.getColumn(columnId)
+
+      if (!column) {
+        throw new Error()
+      }
+
+      return (
+        instance.getState().columnVisibility?.[columnId] ??
+        column.defaultIsVisible ??
+        true
+      )
+    },
+
+    getColumnCanHide: columnId => {
+      const column = instance.getColumn(columnId)
+
+      if (!column) {
+        throw new Error()
+      }
+
+      return (
+        instance.options.enableHiding ??
+        column.enableHiding ??
+        column.defaultCanHide ??
+        true
+      )
+    },
+
+    getIsAllColumnsVisible: () =>
+      !instance.getAllLeafColumns().some(column => !column.getIsVisible?.()),
+
+    getIsSomeColumnsVisible: () =>
+      instance.getAllLeafColumns().some(column => column.getIsVisible?.()),
+
+    getToggleAllColumnsVisibilityProps: userProps => {
+      const props: ToggleAllColumnsVisibilityProps = {
+        onChange: (e: MouseEvent) => {
+          instance.toggleAllColumnsVisible(
+            (e.target as HTMLInputElement)?.checked
+          )
+        },
+        type: 'checkbox',
+        title: 'Toggle visibility for all columns',
+        checked: instance.getIsAllColumnsVisible(),
+        indeterminate:
+          !instance.getIsAllColumnsVisible() &&
+          instance.getIsSomeColumnsVisible()
+            ? 'indeterminate'
+            : undefined,
+      }
+
+      return propGetter(props, userProps)
+    },
+  }
+}

package/src/features/notest/useAbsoluteLayout.test.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useAbsoluteLayout } from '../useAbsoluteLayout'
+
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 30,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  width: 200,
+  minWidth: 100,
+  maxWidth: 300,
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable(
+      {
+        columns,
+        data,
+        defaultColumn,
+      },
+      useAbsoluteLayout
+    )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="row">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="cell header">
+                {column.render('Header')}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="row">
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="cell">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+        )}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+            width: 250,
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+            width: 350,
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            minWidth: 300,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            maxWidth: 150,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a table', () => {
+  const rtl = render(<App />)
+
+  expect(
+    rtl.getAllByRole('columnheader').every(d => d.style.position === 'absolute')
+  ).toBe(true)
+
+  expect(
+    rtl.getAllByRole('columnheader').map(d => [d.style.left, d.style.width])
+  ).toStrictEqual([
+    ['0px', '550px'],
+    ['550px', '850px'],
+    ['0px', '250px'],
+    ['250px', '300px'],
+    ['550px', '300px'],
+    ['850px', '150px'],
+    ['1000px', '200px'],
+    ['1200px', '200px'],
+  ])
+})

package/src/features/notest/useBlockLayout.test.js

@@ -0,0 +1,158 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useBlockLayout } from '../useBlockLayout'
+
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 30,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  width: 200,
+  minWidth: 100,
+  maxWidth: 300,
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable(
+      {
+        columns,
+        data,
+        defaultColumn,
+      },
+      useBlockLayout
+    )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="row">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="cell header">
+                {column.render('Header')}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="row">
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="cell">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+        )}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+            width: 250,
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+            width: 350,
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            minWidth: 300,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            maxWidth: 150,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a table', () => {
+  const rtl = render(<App />)
+
+  expect(
+    rtl
+      .getAllByRole('columnheader')
+      .every(d => d.style.display === 'inline-block')
+  ).toBe(true)
+
+  expect(rtl.getAllByRole('row').every(d => d.style.display === 'flex')).toBe(
+    true
+  )
+
+  expect(
+    rtl.getAllByRole('columnheader').map(d => d.style.width)
+  ).toStrictEqual([
+    '550px',
+    '850px',
+    '250px',
+    '300px',
+    '300px',
+    '150px',
+    '200px',
+    '200px',
+  ])
+})