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

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

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

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