@tanstack/react-table 0.0.1-alpha.0

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

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

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

@@ -0,0 +1,250 @@
+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()
+})