@tanstack/react-table 0.0.1-alpha.0

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

@@ -0,0 +1,186 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useColumnOrder } from '../useColumnOrder'
+
+const data = [
+  {
+    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,
+  },
+  {
+    firstName: 'jaylen',
+    lastName: 'linsley',
+    age: 26,
+    visits: 99,
+    status: 'In Relationship',
+    progress: 70,
+  },
+]
+
+function shuffle(arr, mapping) {
+  if (arr.length !== mapping.length) {
+    throw new Error()
+  }
+  arr = [...arr]
+  mapping = [...mapping]
+  const shuffled = []
+  while (arr.length) {
+    shuffled.push(arr.splice([mapping.shift()], 1)[0])
+  }
+  return shuffled
+}
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    leafColumns,
+    prepareRow,
+    setColumnOrder,
+    state,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useColumnOrder
+  )
+
+  const testColumnOrder = () => {
+    setColumnOrder(
+      shuffle(
+        leafColumns.map(d => d.id),
+        [1, 4, 2, 0, 3, 5]
+      )
+    )
+  }
+
+  return (
+    <>
+      <button onClick={() => testColumnOrder({})}>Randomize Columns</button>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup, i) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.slice(0, 10).map((row, i) => {
+            prepareRow(row)
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell, i) => {
+                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a column-orderable table', () => {
+  const rtl = render(<App />)
+
+  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
+    'Name',
+    'Info',
+    'First Name',
+    'Last Name',
+    'Age',
+    'Visits',
+    'Status',
+    'Profile Progress',
+  ])
+
+  fireEvent.click(rtl.getByText('Randomize Columns'))
+
+  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
+    'Name',
+    'Info',
+    'Name',
+    'Info',
+    'Last Name',
+    'Profile Progress',
+    'Visits',
+    'First Name',
+    'Age',
+    'Status',
+  ])
+})

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

@@ -0,0 +1,125 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useExpanded } from '../useExpanded'
+import makeTestData from '../../../test-utils/makeTestData'
+
+const data = makeTestData(3, 3, 3)
+
+function Table({ columns: userColumns, data, SubComponent }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    leafColumns,
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded
+  )
+
+  return (
+    <>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row, i) => {
+            prepareRow(row)
+            const { key, ...rowProps } = row.getRowProps()
+            return (
+              <React.Fragment key={key}>
+                <tr {...rowProps}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+                {!row.subRows.length && row.isExpanded ? (
+                  <tr>
+                    <td colSpan={leafColumns.length}>
+                      {SubComponent({ row })}
+                    </td>
+                  </tr>
+                ) : null}
+              </React.Fragment>
+            )
+          })}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: () => null,
+        id: 'expander',
+        Cell: ({ row }) => (
+          <span
+            style={{
+              cursor: 'pointer',
+              paddingLeft: `${row.depth * 2}rem`,
+            }}
+            onClick={() => row.toggleRowExpanded()}
+          >
+            {row.isExpanded ? 'Collapse' : 'Expand'} Row {row.id}
+          </span>
+        ),
+      },
+      {
+        Header: 'First Name',
+        accessor: 'name',
+        Cell: ({ row: { id } }) => `Row ${id}`,
+      },
+    ],
+    []
+  )
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      SubComponent={({ row }) => <span>SubComponent: {row.id}</span>}
+    />
+  )
+}
+
+test('renders an expandable table', () => {
+  const rtl = render(<App />)
+
+  rtl.getByText('Row 0')
+
+  fireEvent.click(rtl.getByText('Expand Row 0'))
+
+  rtl.getByText('Row 0.0')
+  rtl.getByText('Row 0.1')
+  rtl.getByText('Row 0.2')
+
+  fireEvent.click(rtl.getByText('Expand Row 0.1'))
+
+  rtl.getByText('Row 0.1.2')
+
+  fireEvent.click(rtl.getByText('Expand Row 0.1.2'))
+
+  rtl.getByText('SubComponent: 0.1.2')
+
+  fireEvent.click(rtl.getByText('Collapse Row 0'))
+
+  expect(rtl.queryByText('SubComponent: 0.1.2')).toBe(null)
+  rtl.getByText('Expand Row 0')
+})

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

@@ -0,0 +1,393 @@
+import React from 'react'
+import { render, fireEvent } from '../../../test-utils/react-testing'
+import { useTable } from '../../hooks/useTable'
+import { useFilters } from '../useFilters'
+import { useGlobalFilter } from '../useGlobalFilter'
+
+const makeData = () => [
+  {
+    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,
+  },
+  {
+    firstName: 'jaylen',
+    lastName: 'linsley',
+    age: 26,
+    visits: 99,
+    status: 'In Relationship',
+    progress: 70,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  Filter: ({ column: { filterValue, setFilter } }) => (
+    <input
+      value={filterValue || ''}
+      onChange={e => {
+        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+      }}
+      placeholder="Search..."
+    />
+  ),
+}
+
+function App(props) {
+  const [data, setData] = React.useState(makeData)
+
+  const columns = React.useMemo(() => {
+    if (props.columns) {
+      return props.columns
+    }
+    return [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ]
+  }, [props.columns])
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    leafColumns,
+    state,
+    setGlobalFilter,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useFilters,
+    useGlobalFilter
+  )
+
+  const reset = () => setData(makeData())
+
+  return (
+    <>
+      <button onClick={reset}>Reset Data</button>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>
+                  {column.render('Header')}
+                  {column.canFilter ? column.render('Filter') : null}
+                </th>
+              ))}
+            </tr>
+          ))}
+          <tr>
+            <th
+              colSpan={leafColumns.length}
+              style={{
+                textAlign: 'left',
+              }}
+            >
+              <span>
+                <input
+                  value={state.globalFilter || ''}
+                  onChange={e => {
+                    setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+                  }}
+                  placeholder={`Global search...`}
+                  style={{
+                    fontSize: '1.1rem',
+                    border: '0',
+                  }}
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  ))}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+test('renders a filterable table', async () => {
+  const rendered = render(<App />)
+
+  const resetButton = rendered.getByText('Reset Data')
+  const globalFilterInput = rendered.getByPlaceholderText('Global search...')
+  const filterInputs = rendered.getAllByPlaceholderText('Search...')
+
+  expect(filterInputs).toHaveLength(6)
+
+  fireEvent.change(filterInputs[1], { target: { value: 'l' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: tanner', 'firstName: jaylen'])
+
+  fireEvent.change(filterInputs[1], { target: { value: 'er' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: derek', 'firstName: joe'])
+
+  fireEvent.change(filterInputs[2], { target: { value: 'nothing' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([])
+
+  fireEvent.change(filterInputs[1], { target: { value: '' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([])
+
+  fireEvent.change(filterInputs[2], { target: { value: '' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([
+    'firstName: tanner',
+    'firstName: derek',
+    'firstName: joe',
+    'firstName: jaylen',
+  ])
+
+  fireEvent.change(globalFilterInput, { target: { value: 'li' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: tanner', 'firstName: joe', 'firstName: jaylen'])
+
+  fireEvent.click(resetButton)
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([
+    'firstName: tanner',
+    'firstName: derek',
+    'firstName: joe',
+    'firstName: jaylen',
+  ])
+})
+
+test('does not filter columns marked as disableFilters', () => {
+  const columns = [
+    {
+      Header: 'Name',
+      columns: [
+        {
+          Header: 'First Name',
+          accessor: 'firstName',
+          disableFilters: true,
+        },
+        {
+          Header: 'Last Name',
+          accessor: 'lastName',
+          disableFilters: true,
+        },
+      ],
+    },
+    {
+      Header: 'Info',
+      columns: [
+        {
+          Header: 'Age',
+          accessor: 'age',
+        },
+        {
+          Header: 'Visits',
+          accessor: 'visits',
+        },
+        {
+          Header: 'Status',
+          accessor: 'status',
+        },
+        {
+          Header: 'Profile Progress',
+          accessor: 'progress',
+        },
+      ],
+    },
+  ]
+  const rendered = render(<App columns={columns} />)
+
+  const filterInputs = rendered.getAllByPlaceholderText('Search...')
+
+  expect(filterInputs).toHaveLength(4)
+
+  // should be Age column
+  fireEvent.change(filterInputs[0], { target: { value: '45' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: joe'])
+
+  fireEvent.change(filterInputs[0], { target: { value: '' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([
+    'firstName: tanner',
+    'firstName: derek',
+    'firstName: joe',
+    'firstName: jaylen',
+  ])
+})
+
+test('does not filter columns with GlobalFilter if marked disableGlobalFilter', () => {
+  const columns = [
+    {
+      Header: 'Name',
+      columns: [
+        {
+          Header: 'First Name',
+          accessor: 'firstName',
+          disableGlobalFilter: true,
+        },
+        {
+          Header: 'Last Name',
+          accessor: 'lastName',
+          disableGlobalFilter: true,
+        },
+      ],
+    },
+    {
+      Header: 'Info',
+      columns: [
+        {
+          Header: 'Age',
+          accessor: 'age',
+        },
+        {
+          Header: 'Visits',
+          accessor: 'visits',
+        },
+        {
+          Header: 'Status',
+          accessor: 'status',
+        },
+        {
+          Header: 'Profile Progress',
+          accessor: 'progress',
+        },
+      ],
+    },
+  ]
+  const rendered = render(<App columns={columns} />)
+
+  const globalFilterInput = rendered.getByPlaceholderText('Global search...')
+
+  fireEvent.change(globalFilterInput, { target: { value: '' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual([
+    'firstName: tanner',
+    'firstName: derek',
+    'firstName: joe',
+    'firstName: jaylen',
+  ])
+
+  // global filter shouldn't apply to firstName or lastName
+  fireEvent.change(globalFilterInput, { target: { value: 'li' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: joe'])
+
+  // double check global filter ignore (should ignore joe bergevin)
+  fireEvent.change(globalFilterInput, { target: { value: 'in' } })
+  expect(
+    rendered
+      .queryAllByRole('row')
+      .slice(3)
+      .map(row => Array.from(row.children)[0].textContent)
+  ).toEqual(['firstName: tanner', 'firstName: derek', 'firstName: jaylen'])
+})