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

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

@@ -1,256 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useRowSelect } from '../useRowSelect'
-import { useFilters } from '../useFilters'
-
-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: '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,
-    state,
-  } = useTable(
-    {
-      columns,
-      data,
-      defaultColumn,
-    },
-    useFilters,
-    useRowSelect
-  )
-
-  // 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')}
-                  {column.canFilter ? column.render('Filter') : null}
-                </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>
-      <p>
-        Selected Rows:{' '}
-        <span data-testid="selected-count">
-          {Object.keys(state.selection).length}
-        </span>
-      </p>
-      <pre>
-        <code>{JSON.stringify({ selection: state.selection }, null, 2)}</code>
-      </pre>
-    </>
-  )
-}
-
-const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
-  Filter: ({ column: { filterValue, setFilter } }) => (
-    <input
-      value={filterValue || ''}
-      onChange={e => {
-        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
-      }}
-      placeholder="Search..."
-    />
-  ),
-}
-
-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: 'selection',
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ 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>
-        ),
-      },
-      {
-        id: 'selectedStatus',
-        Cell: ({ row }) => (
-          <div>
-            Row {row.id} {row.isSelected ? 'Selected' : 'Not Selected'}
-          </div>
-        ),
-      },
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-          },
-          {
-            id: 'visits',
-            Header: 'Visits',
-            accessor: 'visits',
-            filter: 'equals',
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  return <Table columns={columns} data={data} />
-}
-
-test('Select/Clear All while filtered only affects visible rows', () => {
-  const { getAllByPlaceholderText, getByLabelText, getByTestId } = render(
-    <App />
-  )
-  const selectedCount = getByTestId('selected-count')
-  const selectAllCheckbox = getByLabelText('Select All')
-  const fe = fireEvent
-  const filterInputs = getAllByPlaceholderText('Search...')
-
-  fireEvent.change(filterInputs[3], { target: { value: '40' } })
-  expect(selectedCount.textContent).toBe('0') // No selection has been made
-
-  expect(selectAllCheckbox.checked).toBe(false)
-  fireEvent.click(selectAllCheckbox)
-  expect(selectAllCheckbox.checked).toBe(true)
-  expect(selectedCount.textContent).toBe('6') // "Select All" has happened
-
-  // This filter hides all the rows (nothing matches it)
-  fireEvent.change(filterInputs[3], { target: { value: '10' } })
-  expect(selectedCount.textContent).toBe('6') // Filtering does not alter the selection
-
-  expect(selectAllCheckbox.checked).toBe(false) // None of the selected items are visible, this should be false
-  fireEvent.click(selectAllCheckbox) // The selection is is for no rows
-  expect(selectAllCheckbox.checked).toBe(false) // So clicking this checkbox does nothing
-  expect(selectedCount.textContent).toBe('6') // And does not affect the existing selection
-
-  fireEvent.change(filterInputs[3], { target: { value: '100' } })
-  expect(selectAllCheckbox.checked).toBe(false) // None of the selected items are visible, this should be false
-  fireEvent.click(selectAllCheckbox)
-  expect(selectAllCheckbox.checked).toBe(true) // Now all of the visible rows are ALSO selected
-  expect(selectedCount.textContent).toBe('12') // Clearing all should leave the original 6 selected
-
-  // Now deselect all the rows that match the filter
-  fireEvent.click(selectAllCheckbox)
-  expect(selectAllCheckbox.checked).toBe(false) // Now all of the visible rows are ALSO selected
-  expect(selectedCount.textContent).toBe('6') // Clearing all should leave the original 6 selected
-
-  fireEvent.change(filterInputs[3], { target: { value: '' } })
-  expect(selectedCount.textContent).toBe('6') // Clearing the Filter does not alter the selection
-
-  expect(selectAllCheckbox.checked).toBe(false) // Only a subset are selected so this button should show indeterminant
-  fireEvent.click(selectAllCheckbox)
-  expect(selectAllCheckbox.checked).toBe(true) // Now all of the visible rows are ALSO selected
-  expect(selectedCount.textContent).toBe(data.length.toString()) // Select All should select ALL of the rows
-
-  fireEvent.click(selectAllCheckbox)
-  expect(selectedCount.textContent).toBe('0') // Select All should now clear ALL of the rows
-})

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

@@ -1,152 +0,0 @@
-import React from 'react'
-import { useTable } from '../../hooks/useTable'
-import { useFlexLayout } from '../useFlexLayout'
-import { render } from '../../../test-utils/react-testing'
-
-const data = [
-  {
-    firstName: 'tanner',
-    lastName: 'linsley',
-    age: 29,
-    visits: 100,
-    status: 'In Relationship',
-    progress: 50,
-  },
-  {
-    firstName: 'derek',
-    lastName: 'perkins',
-    age: 30,
-    visits: 40,
-    status: 'Single',
-    progress: 80,
-  },
-  {
-    firstName: 'joe',
-    lastName: 'bergevin',
-    age: 45,
-    visits: 20,
-    status: 'Complicated',
-    progress: 10,
-  },
-]
-
-const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
-  width: 200,
-  minWidth: 100,
-  maxWidth: 300,
-}
-
-function Table({ columns, data }) {
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-    useTable(
-      {
-        columns,
-        data,
-        defaultColumn,
-      },
-      useFlexLayout
-    )
-
-  return (
-    <div {...getTableProps()} className="table">
-      <div>
-        {headerGroups.map(headerGroup => (
-          <div {...headerGroup.getHeaderGroupProps()} className="row">
-            {headerGroup.headers.map(column => (
-              <div {...column.getHeaderProps()} className="cell header">
-                {column.render('Header')}
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-
-      <div {...getTableBodyProps()}>
-        {rows.map(
-          (row, i) =>
-            prepareRow(row) || (
-              <div {...row.getRowProps()} className="row">
-                {row.cells.map(cell => {
-                  return (
-                    <div {...cell.getCellProps()} className="cell">
-                      {cell.render('Cell')}
-                    </div>
-                  )
-                })}
-              </div>
-            )
-        )}
-      </div>
-    </div>
-  )
-}
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-            width: 250,
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-            width: 350,
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-            minWidth: 300,
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-            maxWidth: 150,
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  return <Table columns={columns} data={data} />
-}
-
-test('renders a table', () => {
-  const rendered = render(<App />)
-
-  const [headerRow, , firstRow] = rendered.queryAllByRole('row')
-
-  expect(headerRow.getAttribute('style')).toEqual(
-    'display: flex; flex: 1 0 auto; min-width: 800px;'
-  )
-
-  expect(
-    Array.from(firstRow.children).map(d => d.getAttribute('style'))
-  ).toEqual([
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 250px;',
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 300px;',
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 300px; width: 300px;',
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 150px;',
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 200px;',
-    'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 200px;',
-  ])
-})

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

@@ -1,259 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '../../../test-utils/react-testing'
-import { useTable } from '../../hooks/useTable'
-import { useGrouping } from '../useGrouping'
-import { useExpanded } from '../useExpanded'
-
-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: 'joe',
-    lastName: 'dirt',
-    age: 20,
-    visits: 5,
-    status: 'Complicated',
-    progress: 97,
-  },
-  {
-    firstName: 'jaylen',
-    lastName: 'linsley',
-    age: 26,
-    visits: 99,
-    status: 'In Relationship',
-    progress: 70,
-  },
-]
-
-const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
-  Filter: ({ filterValue, setFilter }) => (
-    <input
-      value={filterValue || ''}
-      onChange={e => {
-        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
-      }}
-      placeholder="Search..."
-    />
-  ),
-}
-
-function Table({ columns, data }) {
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
-    useTable(
-      {
-        columns,
-        data,
-        defaultColumn,
-        initialState: {
-          grouping: ["Column Doesn't Exist"],
-        },
-      },
-      useGrouping,
-      useExpanded
-    )
-
-  return (
-    <table {...getTableProps()}>
-      <thead>
-        {headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map(column => (
-              <th {...column.getHeaderProps()}>
-                {column.canGroup ? (
-                  // If the column can be grouped, let's add a toggle
-                  <span {...column.getToggleGroupingProps()}>
-                    {column.getIsGrouped() ? 'Ungroup' : 'Group'} {column.id}
-                  </span>
-                ) : null}
-                {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.getIsGrouped() ? (
-                        <>
-                          <span
-                            style={{
-                              cursor: 'pointer',
-                            }}
-                            onClick={() => row.toggleRowExpanded()}
-                          >
-                            {row.getIsExpanded() ? '👇' : '👉'}
-                          </span>
-                          {cell.render('Cell')} ({row.subRows.length})
-                        </>
-                      ) : cell.getIsAggregated() ? (
-                        cell.render('Aggregated')
-                      ) : cell.getIsPlaceholder() ? null : (
-                        cell.render('Cell')
-                      )}
-                    </td>
-                  )
-                })}
-              </tr>
-            )
-        )}
-      </tbody>
-    </table>
-  )
-}
-
-// This is a custom aggregator that
-// takes in an array of leaf values and
-// returns the rounded median
-function roundedMedian(leafValues) {
-  let min = leafValues[0] || 0
-  let max = leafValues[0] || 0
-
-  leafValues.forEach(value => {
-    min = Math.min(min, value)
-    max = Math.max(max, value)
-  })
-
-  return Math.round((min + max) / 2)
-}
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-            aggregate: 'count',
-            Aggregated: ({ value }) => `First Name Aggregated: ${value} Names`,
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-            aggregate: 'uniqueCount',
-            Aggregated: ({ value }) =>
-              `Last Name Aggregated: ${value} Unique Names`,
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-            aggregate: 'average',
-            Aggregated: ({ value }) => `Age Aggregated: ${value} (avg)`,
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-            aggregate: 'sum',
-            Aggregated: ({ value }) => `Visits Aggregated: ${value} (total)`,
-          },
-          {
-            Header: 'Min Visits',
-            id: 'minVisits',
-            accessor: 'visits',
-            aggregate: 'min',
-            Aggregated: ({ value }) => `Visits Aggregated: ${value} (min)`,
-          },
-          {
-            Header: 'Max Visits',
-            id: 'maxVisits',
-            accessor: 'visits',
-            aggregate: 'max',
-            Aggregated: ({ value }) => `Visits Aggregated: ${value} (max)`,
-          },
-          {
-            Header: 'Min/Max Visits',
-            id: 'minMaxVisits',
-            accessor: 'visits',
-            aggregate: 'minMax',
-            Aggregated: ({ value }) => `Visits Aggregated: ${value} (minMax)`,
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-            aggregate: 'unique',
-            Aggregated: ({ value }) =>
-              `Visits Aggregated: ${value.join(', ')} (unique)`,
-          },
-          {
-            Header: 'Profile Progress (Median)',
-            accessor: 'progress',
-            id: 'progress',
-            aggregate: 'median',
-            Aggregated: ({ value }) => `Process Aggregated: ${value} (median)`,
-          },
-          {
-            Header: 'Profile Progress (Rounded Median)',
-            accessor: 'progress',
-            id: 'progressRounded',
-            aggregate: roundedMedian,
-            Aggregated: ({ value }) =>
-              `Process Aggregated: ${value} (rounded median)`,
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  return <Table columns={columns} data={data} />
-}
-
-test('renders a groupable table', () => {
-  const rendered = render(<App />)
-
-  fireEvent.click(rendered.getByText('Group lastName'))
-
-  rendered.getByText('lastName: linsley (2)')
-
-  fireEvent.click(rendered.getByText('Group visits'))
-
-  fireEvent.click(rendered.getByText('Ungroup lastName'))
-
-  rendered.getByText('visits: 100 (1)')
-
-  fireEvent.click(rendered.getByText('Ungroup visits'))
-
-  fireEvent.click(rendered.getByText('Group firstName'))
-
-  rendered.getByText('firstName: tanner (1)')
-
-  rendered.debugDiff(false)
-  fireEvent.click(rendered.getByText('Group age'))
-
-  rendered.getByText('Last Name Aggregated: 2 Unique Names')
-})