@tanstack/react-table 0.0.1-alpha.0

package/src/sortTypes.ts

@@ -0,0 +1,159 @@
+import { Row } from './types'
+
+const reSplitAlphaNumeric = /([0-9]+)/gm
+
+export const sortTypes = {
+  alphanumeric,
+  alphanumericCaseSensitive,
+  text,
+  textCaseSensitive,
+  datetime,
+  basic,
+}
+
+export type BuiltInSortType = keyof typeof sortTypes
+
+function alphanumeric<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareAlphanumeric(
+    toString(rowA.values[columnId]).toLowerCase(),
+    toString(rowB.values[columnId]).toLowerCase()
+  )
+}
+
+function alphanumericCaseSensitive<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareAlphanumeric(
+    toString(rowA.values[columnId]),
+    toString(rowB.values[columnId])
+  )
+}
+
+// Mixed sorting is slow, but very inclusive of many edge cases.
+// It handles numbers, mixed alphanumeric combinations, and even
+// null, undefined, and Infinity
+function compareAlphanumeric(aStr: string, bStr: string) {
+  // Split on number groups, but keep the delimiter
+  // Then remove falsey split values
+  const a = aStr.split(reSplitAlphaNumeric).filter(Boolean)
+  const b = bStr.split(reSplitAlphaNumeric).filter(Boolean)
+
+  // While
+  while (a.length && b.length) {
+    const aa = a.shift()!
+    const bb = b.shift()!
+
+    const an = parseInt(aa, 10)
+    const bn = parseInt(bb, 10)
+
+    const combo = [an, bn].sort()
+
+    // Both are string
+    if (isNaN(combo[0]!)) {
+      if (aa > bb) {
+        return 1
+      }
+      if (bb > aa) {
+        return -1
+      }
+      continue
+    }
+
+    // One is a string, one is a number
+    if (isNaN(combo[1]!)) {
+      return isNaN(an) ? -1 : 1
+    }
+
+    // Both are numbers
+    if (an > bn) {
+      return 1
+    }
+    if (bn > an) {
+      return -1
+    }
+  }
+
+  return a.length - b.length
+}
+
+// The text filter is more basic (less numeric support)
+// but is much faster
+function text<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareBasic(
+    toString(rowA.values[columnId]).toLowerCase(),
+    toString(rowB.values[columnId]).toLowerCase()
+  )
+}
+
+// The text filter is more basic (less numeric support)
+// but is much faster
+function textCaseSensitive<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareBasic(
+    toString(rowA.values[columnId]),
+    toString(rowB.values[columnId])
+  )
+}
+
+function datetime<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareBasic(
+    (rowA.values[columnId] as Date).getTime(),
+    (rowB.values[columnId] as Date).getTime()
+  )
+}
+
+function basic<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
+  rowA: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowB: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  columnId: string
+) {
+  return compareBasic(rowA.values[columnId], rowB.values[columnId])
+}
+
+// Utils
+
+function compareBasic(a: any, b: any) {
+  return a === b ? 0 : a > b ? 1 : -1
+}
+
+function toString(a: any) {
+  if (typeof a === 'number') {
+    if (isNaN(a) || a === Infinity || a === -Infinity) {
+      return ''
+    }
+    return String(a)
+  }
+  if (typeof a === 'string') {
+    return a
+  }
+  return ''
+}

package/src/test-utils/makeTestData.ts

@@ -0,0 +1,41 @@
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (depth, index, total) => {
+  const age = (depth + 1) * (index + 1)
+  const visits = age * 10
+  const progress = (index + 1) / total
+
+  return {
+    firstName: `${depth} ${index} firstName`,
+    lastName: `${depth} ${index} lastName`,
+    age,
+    visits,
+    progress,
+    status:
+      progress > 0.66
+        ? 'relationship'
+        : progress > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeTestData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(depth, d, len),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

package/src/tests/__snapshots__/core.test.tsx.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`core renders a table with markup 1`] = `
+[
+  [
+    [
+      "Name",
+      "2",
+    ],
+    [
+      "Info",
+      "4",
+    ],
+  ],
+  [
+    [
+      "",
+      "1",
+    ],
+    [
+      "",
+      "1",
+    ],
+    [
+      "",
+      "1",
+    ],
+    [
+      "More Info",
+      "3",
+    ],
+  ],
+  [
+    [
+      "firstName",
+      "1",
+    ],
+    [
+      "<span>Last Name</span>",
+      "1",
+    ],
+    [
+      "Age",
+      "1",
+    ],
+    [
+      "<span>Visits</span>",
+      "1",
+    ],
+    [
+      "Status",
+      "1",
+    ],
+    [
+      "Profile Progress",
+      "1",
+    ],
+  ],
+]
+`;
+
+exports[`core renders a table with markup 2`] = `
+[
+  [
+    "tanner",
+    "linsley",
+    "29",
+    "100",
+    "In Relationship",
+    "50",
+  ],
+  [
+    "derek",
+    "perkins",
+    "40",
+    "40",
+    "Single",
+    "80",
+  ],
+  [
+    "joe",
+    "bergevin",
+    "45",
+    "20",
+    "Complicated",
+    "10",
+  ],
+]
+`;
+
+exports[`core renders a table with markup 3`] = `
+[
+  [
+    [
+      "firstName",
+      "1",
+    ],
+    [
+      "lastName",
+      "1",
+    ],
+    [
+      "age",
+      "1",
+    ],
+    [
+      "visits",
+      "1",
+    ],
+    [
+      "status",
+      "1",
+    ],
+    [
+      "progress",
+      "1",
+    ],
+  ],
+  [
+    [
+      "",
+      "1",
+    ],
+    [
+      "",
+      "1",
+    ],
+    [
+      "",
+      "1",
+    ],
+    [
+      "More Info",
+      "3",
+    ],
+  ],
+  [
+    [
+      "Name",
+      "2",
+    ],
+    [
+      "Info",
+      "4",
+    ],
+  ],
+]
+`;

package/src/tests/core.test.tsx

@@ -0,0 +1,241 @@
+import * as React from 'react'
+
+// import { renderHook } from '@testing-library/react-hooks'
+import * as RTL from '@testing-library/react'
+import { createTable } from 'react-table'
+import { act, renderHook } from '@testing-library/react-hooks'
+
+type Row = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+const table = createTable().RowType<Row>()
+
+const defaultData: Row[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+const defaultColumns = table.createColumns([
+  table.createGroup({
+    header: 'Name',
+    footer: props => props.column.id,
+    columns: [
+      table.createColumn('firstName', {
+        cell: info => info.value,
+        footer: props => props.column.id,
+      }),
+      table.createColumn(row => row.lastName, {
+        id: 'lastName',
+        cell: info => info.value,
+        header: <span>Last Name</span>,
+        footer: props => props.column.id,
+      }),
+    ],
+  }),
+  table.createGroup({
+    header: 'Info',
+    footer: props => props.column.id,
+    columns: [
+      table.createColumn('age', {
+        header: () => 'Age',
+        footer: props => props.column.id,
+      }),
+      table.createGroup({
+        header: 'More Info',
+        columns: [
+          table.createColumn('visits', {
+            header: () => <span>Visits</span>,
+            footer: props => props.column.id,
+          }),
+          table.createColumn('status', {
+            header: 'Status',
+            footer: props => props.column.id,
+          }),
+          table.createColumn('progress', {
+            header: 'Profile Progress',
+            footer: props => props.column.id,
+          }),
+        ],
+      }),
+    ],
+  }),
+])
+
+describe('core', () => {
+  it('renders a table with markup', () => {
+    const Table = () => {
+      const [data] = React.useState<Row[]>(() => [...defaultData])
+      const [columns] = React.useState<typeof defaultColumns>(() => [
+        ...defaultColumns,
+      ])
+      const [columnVisibility, setColumnVisibility] = React.useState({})
+
+      const rerender = React.useReducer(() => ({}), {})[1]
+
+      const instance = table.useTable({
+        data,
+        columns,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+          columnVisibility,
+        },
+        // debug: true,
+      })
+
+      return (
+        <div className="p-2">
+          <table {...instance.getTableProps()}>
+            <thead>
+              {instance.getHeaderGroups().map(headerGroup => (
+                <tr {...headerGroup.getHeaderGroupProps()}>
+                  {headerGroup.headers.map(header => (
+                    <th {...header.getHeaderProps()}>
+                      {header.isPlaceholder ? null : header.renderHeader()}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...instance.getTableBodyProps()}>
+              {instance.getRows().map(row => (
+                <tr {...row.getRowProps()}>
+                  {row.getVisibleCells().map(cell => (
+                    <td {...cell.getCellProps()}>{cell.renderCell()}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              {instance.getFooterGroups().map(footerGroup => (
+                <tr {...footerGroup.getFooterGroupProps()}>
+                  {footerGroup.headers.map(header => (
+                    <th {...header.getFooterProps()}>
+                      {header.isPlaceholder ? null : header.renderFooter()}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </tfoot>
+          </table>
+          <div className="h-4" />
+          <button onClick={() => rerender()} className="border p-2">
+            Rerender
+          </button>
+        </div>
+      )
+    }
+
+    // let api: any;
+
+    const rendered = RTL.render(<Table />)
+
+    // RTL.screen.logTestingPlaygroundURL();
+
+    RTL.screen.getByRole('table')
+    expect(RTL.screen.getAllByRole('rowgroup').length).toEqual(3)
+    expect(RTL.screen.getAllByRole('row').length).toEqual(9)
+    expect(RTL.screen.getAllByRole('columnheader').length).toEqual(12)
+    expect(RTL.screen.getAllByRole('columnfooter').length).toEqual(12)
+    expect(RTL.screen.getAllByRole('gridcell').length).toEqual(18)
+
+    expect(
+      Array.from(rendered.container.querySelectorAll('thead > tr')).map(d =>
+        Array.from(d.querySelectorAll('th')).map(d => [
+          d.innerHTML,
+          d.getAttribute('colspan'),
+        ])
+      )
+    ).toMatchSnapshot()
+
+    expect(
+      Array.from(rendered.container.querySelectorAll('tbody > tr')).map(d =>
+        Array.from(d.querySelectorAll('td')).map(d => d.innerHTML)
+      )
+    ).toMatchSnapshot()
+
+    expect(
+      Array.from(rendered.container.querySelectorAll('tfoot > tr')).map(d =>
+        Array.from(d.querySelectorAll('th')).map(d => [
+          d.innerHTML,
+          d.getAttribute('colspan'),
+        ])
+      )
+    ).toMatchSnapshot()
+  })
+
+  it('has a stable api', () => {
+    const { result } = renderHook(() => {
+      const rerender = React.useReducer(() => ({}), {})[1]
+
+      const instance = table.useTable({
+        data: defaultData,
+        columns: defaultColumns,
+      })
+
+      return {
+        instance,
+        rerender,
+      }
+    })
+
+    const prev = result.current
+
+    act(() => {
+      result.current.rerender()
+    })
+
+    const next = result.current
+
+    expect(prev).toStrictEqual(next)
+  })
+
+  it('can return the rowModel', () => {
+    const { result } = renderHook(() => {
+      const rerender = React.useReducer(() => ({}), {})[1]
+
+      const instance = table.useTable({
+        data: defaultData,
+        columns: defaultColumns,
+      })
+
+      return {
+        instance,
+        rerender,
+      }
+    })
+
+    const rowModel = result.current.instance.getRowModel()
+
+    expect(rowModel.rows.length).toEqual(3)
+    expect(rowModel.flatRows.length).toEqual(3)
+    expect(rowModel.rowsById['2']?.original).toEqual(defaultData[2])
+  })
+})