@tanstack/react-table 0.0.1-alpha.0

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

@@ -0,0 +1,178 @@
+import React from 'react'
+import { render, fireEvent } from '../../../test-utils/react-testing'
+import { useTable } from '../../hooks/useTable'
+import { useRowState } from '../useRowState'
+
+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,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ column, cell, row }) => (
+    <div>
+      Row {row.id} Cell {column.id} Count {cell.state.count}{' '}
+      <button
+        onClick={() => cell.setState(old => ({ ...old, count: old.count + 1 }))}
+      >
+        Row {row.id} Cell {column.id} Toggle
+      </button>
+    </div>
+  ),
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable(
+      {
+        columns,
+        data,
+        defaultColumn,
+        initialRowStateAccessor: () => ({ count: 0 }),
+        initialCellStateAccessor: () => ({ count: 0 }),
+      },
+      useRowState
+    )
+
+  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) || (
+              <tr {...row.getRowProps()}>
+                <td>
+                  <pre>Row Count {row.state.count}</pre>
+                  <button
+                    onClick={() =>
+                      row.setState(old => ({
+                        ...old,
+                        count: old.count + 1,
+                      }))
+                    }
+                  >
+                    Row {row.id} Toggle
+                  </button>
+                </td>
+                {row.cells.map(cell => (
+                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                ))}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+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 filterable table', () => {
+  const rendered = render(<App />)
+
+  fireEvent.click(rendered.getByText('Row 1 Toggle'))
+  fireEvent.click(rendered.getByText('Row 1 Toggle'))
+
+  rendered.getByText('Row Count 2')
+
+  fireEvent.click(rendered.getByText('Row 1 Cell firstName Toggle'))
+
+  rendered.getByText('Row 1 Cell firstName Count 1')
+
+  fireEvent.click(rendered.getByText('Row 2 Cell lastName Toggle'))
+  fireEvent.click(rendered.getByText('Row 2 Cell lastName Toggle'))
+
+  rendered.getByText('Row 2 Cell lastName Count 2')
+
+  fireEvent.click(rendered.getByText('Row 3 Cell age Toggle'))
+  fireEvent.click(rendered.getByText('Row 3 Cell age Toggle'))
+  fireEvent.click(rendered.getByText('Row 3 Cell age Toggle'))
+
+  rendered.getByText('Row 3 Cell age Count 3')
+
+  fireEvent.click(rendered.getByText('Row 1 Toggle'))
+  fireEvent.click(rendered.getByText('Row 1 Toggle'))
+
+  rendered.getByText('Row Count 4')
+})

package/src/features/tests/Visibility.test.tsx

@@ -0,0 +1,225 @@
+import * as React from 'react'
+
+// import { renderHook } from '@testing-library/react-hooks'
+import * as RTL from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { createTable } from 'react-table'
+
+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('useTable', () => {
+  it('can toggle column visibility', () => {
+    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">
+          <div className="inline-block border border-black shadow rounded">
+            <div className="px-1 border-b border-black">
+              <label>
+                <input {...instance.getToggleAllColumnsVisibilityProps()} />{' '}
+                Toggle All
+              </label>
+            </div>
+            {instance.getAllLeafColumns().map(column => {
+              return (
+                <div key={column.id} className="px-1">
+                  <label>
+                    <input {...column.getToggleVisibilityProps()} /> {column.id}
+                  </label>
+                </div>
+              )
+            })}
+          </div>
+          <div className="h-4" />
+          <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()
+
+    let snapIndex = 0
+
+    const snap = (name: string) => {
+      expect({
+        headers: Array.from(
+          rendered.container.querySelectorAll('thead > tr')
+        ).map(d =>
+          Array.from(d.querySelectorAll('th')).map(d => [
+            d.innerHTML,
+            d.getAttribute('colspan'),
+          ])
+        ),
+        rows: Array.from(rendered.container.querySelectorAll('tbody > tr')).map(
+          d => Array.from(d.querySelectorAll('td')).map(d => d.innerHTML)
+        ),
+        footers: Array.from(
+          rendered.container.querySelectorAll('tfoot > tr')
+        ).map(d =>
+          Array.from(d.querySelectorAll('th')).map(d => [
+            d.innerHTML,
+            d.getAttribute('colspan'),
+          ])
+        ),
+      }).toMatchSnapshot(`${snapIndex++} - ${name}`)
+    }
+
+    RTL.fireEvent.click(rendered.getByLabelText('Toggle All'))
+
+    snap('after toggling all off')
+
+    RTL.fireEvent.click(rendered.getByLabelText('Toggle All'))
+
+    snap('after toggling all on')
+
+    RTL.fireEvent.click(rendered.getByLabelText('firstName'))
+
+    snap('after toggling firstName off')
+
+    RTL.fireEvent.click(rendered.getByLabelText('firstName'))
+    RTL.fireEvent.click(rendered.getByLabelText('visits'))
+    RTL.fireEvent.click(rendered.getByLabelText('status'))
+    RTL.fireEvent.click(rendered.getByLabelText('progress'))
+
+    snap('after toggling More Info off')
+  })
+})