@tanstack/react-table 0.0.1-alpha.9 → 8.0.0-alpha.14

package/src/features/Visibility.ts

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

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

@@ -1,158 +0,0 @@
-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',
-  ])
-})