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

package/src/sortTypes.ts

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

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

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

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