@tanstack/react-table 0.0.1-alpha.8 → 8.0.0-alpha.2

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

@@ -1,229 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useBlockLayout } from '../useBlockLayout'
-import { useResizeColumns } from '../useResizeColumns'
-
-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,
-  },
-]
-function Table({ columns, data }) {
-  const defaultColumn = React.useMemo(
-    () => ({
-      minWidth: 30,
-      width: 150,
-      maxWidth: 400,
-    }),
-    []
-  )
-
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-    useTable(
-      {
-        columns,
-        data,
-        defaultColumn,
-      },
-      useBlockLayout,
-      useResizeColumns
-    )
-
-  return (
-    <div {...getTableProps()} className="table">
-      <div>
-        {headerGroups.map(headerGroup => (
-          <div {...headerGroup.getHeaderGroupProps()} className="tr">
-            {headerGroup.headers.map(column => (
-              <div {...column.getHeaderProps()} className="th">
-                {column.render('Header')}
-                {/* Use column.getResizerProps to hook up the events correctly */}
-                <div
-                  {...column.getResizerProps()}
-                  className={`resizer${column.isResizing ? ' isResizing' : ''}`}
-                />
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-
-      <div {...getTableBodyProps()}>
-        {rows.map((row, i) => {
-          prepareRow(row)
-          return (
-            <div {...row.getRowProps()} className="tr">
-              {row.cells.map(cell => {
-                return (
-                  <div {...cell.getCellProps()} className="td">
-                    {cell.render('Cell')}
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-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',
-            width: 50,
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-            width: 60,
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  return <Table columns={columns} data={data} />
-}
-
-const start = 20
-const move = 100
-const end = 100
-
-const sizesBefore = [
-  '300px',
-  '410px',
-  '150px',
-  '150px',
-  '50px',
-  '60px',
-  '150px',
-  '150px',
-]
-
-const sizesAfter = [
-  '300px',
-  '490px',
-  '150px',
-  '150px',
-  '59.75609756097561px',
-  '71.70731707317073px',
-  '179.26829268292684px',
-  '179.26829268292684px',
-]
-
-test('table can be resized by a mouse', () => {
-  const rtl = render(<App />)
-
-  const infoResizer = rtl
-    .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
-  )
-
-  fireEvent.mouseDown(infoResizer, { clientX: start })
-  fireEvent.mouseMove(infoResizer, { clientX: move })
-  fireEvent.mouseUp(infoResizer, { clientX: end })
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesAfter
-  )
-})
-
-test('table can be resized by a touch device', () => {
-  const rtl = render(<App />)
-
-  const infoResizer = rtl
-    .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
-  )
-
-  fireEvent.touchStart(infoResizer, { touches: [{ clientX: start }] })
-  fireEvent.touchMove(infoResizer, { touches: [{ clientX: move }] })
-  fireEvent.touchEnd(infoResizer, { touches: [{ clientX: end }] })
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesAfter
-  )
-})
-
-test('table can not be resized with multiple touches', () => {
-  const rtl = render(<App />)
-
-  const infoResizer = rtl
-    .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
-  )
-
-  fireEvent.touchStart(infoResizer, {
-    touches: [{ clientX: start }, { clientX: start }],
-  })
-  fireEvent.touchMove(infoResizer, {
-    touches: [{ clientX: move }, { clientX: move }],
-  })
-  fireEvent.touchEnd(infoResizer, {
-    touches: [{ clientX: end }, { clientX: end }],
-  })
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
-  )
-})

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

@@ -1,250 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useRowSelect } from '../useRowSelect'
-import { useExpanded } from '../useExpanded'
-
-const dataPiece = [
-  {
-    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,
-    expanded: true,
-    subRows: [
-      {
-        firstName: 'bob',
-        lastName: 'ross',
-        age: 52,
-        visits: 40,
-        status: 'In Relationship',
-        progress: 30,
-      },
-      {
-        firstName: 'john',
-        lastName: 'smith',
-        age: 21,
-        visits: 30,
-        status: 'Single',
-        progress: 60,
-      },
-    ],
-  },
-  {
-    firstName: 'jaylen',
-    lastName: 'linsley',
-    age: 26,
-    visits: 99,
-    status: 'In Relationship',
-    progress: 70,
-  },
-]
-
-const data = [
-  ...dataPiece,
-  ...dataPiece,
-  ...dataPiece,
-  ...dataPiece,
-  ...dataPiece,
-  ...dataPiece,
-]
-
-function Table({ columns, data }) {
-  // Use the state and functions returned from useTable to build your UI
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-    useTable(
-      {
-        columns,
-        data,
-      },
-      useRowSelect,
-      useExpanded,
-      hooks => {
-        hooks.leafColumns.push(columns => [
-          // Let's make a column for selection
-          {
-            id: 'selection',
-            // The header can use the table's getToggleAllRowsSelectedProps method
-            // to render a checkbox
-            Header: ({ instance: { getToggleAllRowsSelectedProps } }) => (
-              <div>
-                <label>
-                  <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />{' '}
-                  Select All
-                </label>
-              </div>
-            ),
-            // The cell can use the individual row's getToggleRowSelectedProps method
-            // to the render a checkbox
-            Cell: ({ row }) => (
-              <div>
-                <label>
-                  <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />{' '}
-                  Select Row
-                </label>
-              </div>
-            ),
-          },
-          ...columns,
-        ])
-      }
-    )
-
-  // Render the UI for your table
-  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()}>
-                  {row.cells.map(cell => {
-                    return (
-                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                    )
-                  })}
-                </tr>
-              )
-          )}
-        </tbody>
-      </table>
-    </>
-  )
-}
-
-const IndeterminateCheckbox = React.forwardRef(
-  ({ indeterminate, ...rest }, ref) => {
-    const defaultRef = React.useRef()
-    const resolvedRef = ref || defaultRef
-
-    React.useEffect(() => {
-      resolvedRef.current.indeterminate = indeterminate
-    }, [resolvedRef, indeterminate])
-
-    return <input type="checkbox" ref={resolvedRef} {...rest} />
-  }
-)
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'selectedStatus',
-        Cell: ({ row }) =>
-          row.isSelected ? (
-            <div>
-              <div>Selected</div>
-              <div>Row {row.id}</div>
-            </div>
-          ) : null,
-      },
-      {
-        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 table with selectable rows', () => {
-  const rtl = render(<App />)
-
-  fireEvent.click(rtl.getByLabelText('Select All'))
-
-  expect(rtl.getAllByText('Selected').length).toBe(24)
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[2])
-
-  expect(rtl.queryAllByText('Selected').length).toBe(23)
-
-  fireEvent.click(rtl.getByLabelText('Select All'))
-
-  expect(rtl.queryAllByText('Selected').length).toBe(24)
-
-  fireEvent.click(rtl.getByLabelText('Select All'))
-
-  expect(rtl.queryAllByText('Selected').length).toBe(0)
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[0])
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[2])
-
-  rtl.getByText('Row 0')
-  rtl.getByText('Row 2')
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[2])
-
-  expect(rtl.queryByText('Row 2')).toBeNull()
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[3])
-
-  rtl.queryByText('Row 3')
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[4])
-
-  rtl.queryByText('Row 4')
-
-  fireEvent.click(rtl.getAllByLabelText('Select Row')[4])
-
-  expect(rtl.queryByText('Row 4')).toBeNull()
-})

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')
-})