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

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

@@ -1,231 +0,0 @@
-import React from 'react'
-import { renderHook, act } from '@testing-library/react-hooks'
-import { render, fireEvent } from '../../../test-utils/react-testing'
-import { useTable } from '../../hooks/useTable'
-import { usePagination } from '../usePagination'
-import { useFilters } from '../useFilters'
-
-const data = [...new Array(1000)].fill(null).map((d, i) => ({
-  firstName: `tanner ${i + 1}`,
-  lastName: 'linsley',
-  age: 29,
-  visits: 100,
-  status: 'In Relationship',
-  progress: 50,
-}))
-
-const columns = [
-  {
-    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',
-      },
-    ],
-  },
-]
-
-function Table({ columns, data }) {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    page,
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
-      data,
-      initialState: { pageIndex: 2 },
-    },
-    usePagination
-  )
-
-  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()}>
-          {page.map(
-            (row, i) =>
-              prepareRow(row) || (
-                <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => {
-                    return (
-                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                    )
-                  })}
-                </tr>
-              )
-          )}
-        </tbody>
-      </table>
-      <div className="pagination">
-        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
-          {'<<'}
-        </button>{' '}
-        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
-          {'<'}
-        </button>{' '}
-        <button onClick={() => nextPage()} disabled={!canNextPage}>
-          {'>'}
-        </button>{' '}
-        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
-          {'>>'}
-        </button>{' '}
-        <span>
-          Page{' '}
-          <strong>
-            {pageIndex + 1} of {pageOptions.length}
-          </strong>{' '}
-        </span>
-        <span>
-          | Go to page:{' '}
-          <input
-            type="number"
-            defaultValue={pageIndex + 1}
-            onChange={e => {
-              const page = e.target.value ? Number(e.target.value) - 1 : 0
-              gotoPage(page)
-            }}
-            style={{ width: '100px' }}
-          />
-        </span>{' '}
-        <select
-          value={pageSize}
-          onChange={e => {
-            setPageSize(Number(e.target.value))
-          }}
-          data-testid="page-size-select"
-        >
-          {[10, 20, 30, 40, 50].map(pageSize => (
-            <option key={pageSize} value={pageSize}>
-              Show {pageSize}
-            </option>
-          ))}
-        </select>
-      </div>
-    </>
-  )
-}
-
-function App() {
-  return <Table columns={columns} data={data} />
-}
-
-test('renders a paginated table', () => {
-  const rendered = render(<App />)
-
-  expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 21')
-
-  fireEvent.click(rendered.getByText('>'))
-  expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 31')
-
-  fireEvent.click(rendered.getByText('>'))
-  expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 41')
-
-  fireEvent.click(rendered.getByText('>>'))
-  expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 991')
-
-  fireEvent.click(rendered.getByText('<<'))
-  expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 1')
-
-  fireEvent.change(rendered.getByTestId('page-size-select'), {
-    target: { value: 30 },
-  })
-
-  expect(
-    rendered.queryAllByRole('row').slice(2).reverse()[0].children[0].textContent
-  ).toEqual('tanner 30')
-})
-
-describe('usePagination', () => {
-  test('renders a paginated table', () => {
-    const rendered = render(<App />)
-
-    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 21')
-
-    fireEvent.click(rendered.getByText('>'))
-    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 31')
-
-    fireEvent.click(rendered.getByText('>'))
-    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 41')
-
-    fireEvent.click(rendered.getByText('>>'))
-    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 991')
-
-    fireEvent.click(rendered.getByText('<<'))
-    expect(rendered.queryAllByRole('cell')[0].textContent).toEqual('tanner 1')
-
-    fireEvent.change(rendered.getByTestId('page-size-select'), {
-      target: { value: 30 },
-    })
-
-    expect(
-      rendered.queryAllByRole('row').slice(2).reverse()[0].children[0]
-        .textContent
-    ).toEqual('tanner 30')
-  })
-
-  test('changing columnFilters resets pagination', async () => {
-    const { result } = renderHook(() =>
-      useTable(
-        {
-          columns,
-          data,
-        },
-        useFilters,
-        usePagination
-      )
-    )
-
-    act(() => result.current.nextPage())
-    act(() => result.current.nextPage())
-    expect(result.current.state.pageIndex).toEqual(2)
-    act(() => result.current.leafColumns[0].setFilter('tanner'))
-    expect(result.current.state.pageIndex).toEqual(0)
-  })
-})

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