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

package/lib/index.js

@@ -1,65 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _exportNames = {
-  createTable: true
-};
-exports.createTable = void 0;
-
-var _types = require("./types");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  exports[key] = _types[key];
-});
-
-var _columnFilterRowsFn = require("./utils/columnFilterRowsFn");
-
-Object.keys(_columnFilterRowsFn).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _columnFilterRowsFn[key]) return;
-  exports[key] = _columnFilterRowsFn[key];
-});
-
-var _globalFilterRowsFn = require("./utils/globalFilterRowsFn");
-
-Object.keys(_globalFilterRowsFn).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _globalFilterRowsFn[key]) return;
-  exports[key] = _globalFilterRowsFn[key];
-});
-
-var _sortRowsFn = require("./utils/sortRowsFn");
-
-Object.keys(_sortRowsFn).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _sortRowsFn[key]) return;
-  exports[key] = _sortRowsFn[key];
-});
-
-var _groupRowsFn = require("./utils/groupRowsFn");
-
-Object.keys(_groupRowsFn).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _groupRowsFn[key]) return;
-  exports[key] = _groupRowsFn[key];
-});
-
-var _expandRowsFn = require("./utils/expandRowsFn");
-
-Object.keys(_expandRowsFn).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _expandRowsFn[key]) return;
-  exports[key] = _expandRowsFn[key];
-});
-
-var _createTable = require("./createTable");
-
-exports.createTable = _createTable.createTable;

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

@@ -1,152 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useAbsoluteLayout } from '../useAbsoluteLayout'
-
-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,
-      },
-      useAbsoluteLayout
-    )
-
-  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 rtl = render(<App />)
-
-  expect(
-    rtl.getAllByRole('columnheader').every(d => d.style.position === 'absolute')
-  ).toBe(true)
-
-  expect(
-    rtl.getAllByRole('columnheader').map(d => [d.style.left, d.style.width])
-  ).toStrictEqual([
-    ['0px', '550px'],
-    ['550px', '850px'],
-    ['0px', '250px'],
-    ['250px', '300px'],
-    ['550px', '300px'],
-    ['850px', '150px'],
-    ['1000px', '200px'],
-    ['1200px', '200px'],
-  ])
-})

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

@@ -1,158 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useBlockLayout } from '../useBlockLayout'
-
-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,
-      },
-      useBlockLayout
-    )
-
-  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 rtl = render(<App />)
-
-  expect(
-    rtl
-      .getAllByRole('columnheader')
-      .every(d => d.style.display === 'inline-block')
-  ).toBe(true)
-
-  expect(rtl.getAllByRole('row').every(d => d.style.display === 'flex')).toBe(
-    true
-  )
-
-  expect(
-    rtl.getAllByRole('columnheader').map(d => d.style.width)
-  ).toStrictEqual([
-    '550px',
-    '850px',
-    '250px',
-    '300px',
-    '300px',
-    '150px',
-    '200px',
-    '200px',
-  ])
-})

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

@@ -1,186 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useColumnOrder } from '../useColumnOrder'
-
-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,
-  },
-]
-
-function shuffle(arr, mapping) {
-  if (arr.length !== mapping.length) {
-    throw new Error()
-  }
-  arr = [...arr]
-  mapping = [...mapping]
-  const shuffled = []
-  while (arr.length) {
-    shuffled.push(arr.splice([mapping.shift()], 1)[0])
-  }
-  return shuffled
-}
-
-function Table({ columns, data }) {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    leafColumns,
-    prepareRow,
-    setColumnOrder,
-    state,
-  } = useTable(
-    {
-      columns,
-      data,
-    },
-    useColumnOrder
-  )
-
-  const testColumnOrder = () => {
-    setColumnOrder(
-      shuffle(
-        leafColumns.map(d => d.id),
-        [1, 4, 2, 0, 3, 5]
-      )
-    )
-  }
-
-  return (
-    <>
-      <button onClick={() => testColumnOrder({})}>Randomize Columns</button>
-      <table {...getTableProps()}>
-        <thead>
-          {headerGroups.map((headerGroup, i) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody {...getTableBodyProps()}>
-          {rows.slice(0, 10).map((row, i) => {
-            prepareRow(row)
-            return (
-              <tr {...row.getRowProps()}>
-                {row.cells.map((cell, i) => {
-                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                })}
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
-      <pre>
-        <code>{JSON.stringify(state, null, 2)}</code>
-      </pre>
-    </>
-  )
-}
-
-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 column-orderable table', () => {
-  const rtl = render(<App />)
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
-    'Name',
-    'Info',
-    'First Name',
-    'Last Name',
-    'Age',
-    'Visits',
-    'Status',
-    'Profile Progress',
-  ])
-
-  fireEvent.click(rtl.getByText('Randomize Columns'))
-
-  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
-    'Name',
-    'Info',
-    'Name',
-    'Info',
-    'Last Name',
-    'Profile Progress',
-    'Visits',
-    'First Name',
-    'Age',
-    'Status',
-  ])
-})

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

@@ -1,125 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { useTable } from '../../hooks/useTable'
-import { useExpanded } from '../useExpanded'
-import makeTestData from '../../../test-utils/makeTestData'
-
-const data = makeTestData(3, 3, 3)
-
-function Table({ columns: userColumns, data, SubComponent }) {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-    leafColumns,
-  } = useTable(
-    {
-      columns: userColumns,
-      data,
-    },
-    useExpanded
-  )
-
-  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)
-            const { key, ...rowProps } = row.getRowProps()
-            return (
-              <React.Fragment key={key}>
-                <tr {...rowProps}>
-                  {row.cells.map(cell => {
-                    return (
-                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                    )
-                  })}
-                </tr>
-                {!row.subRows.length && row.isExpanded ? (
-                  <tr>
-                    <td colSpan={leafColumns.length}>
-                      {SubComponent({ row })}
-                    </td>
-                  </tr>
-                ) : null}
-              </React.Fragment>
-            )
-          })}
-        </tbody>
-      </table>
-    </>
-  )
-}
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: () => null,
-        id: 'expander',
-        Cell: ({ row }) => (
-          <span
-            style={{
-              cursor: 'pointer',
-              paddingLeft: `${row.depth * 2}rem`,
-            }}
-            onClick={() => row.toggleRowExpanded()}
-          >
-            {row.isExpanded ? 'Collapse' : 'Expand'} Row {row.id}
-          </span>
-        ),
-      },
-      {
-        Header: 'First Name',
-        accessor: 'name',
-        Cell: ({ row: { id } }) => `Row ${id}`,
-      },
-    ],
-    []
-  )
-
-  return (
-    <Table
-      columns={columns}
-      data={data}
-      SubComponent={({ row }) => <span>SubComponent: {row.id}</span>}
-    />
-  )
-}
-
-test('renders an expandable table', () => {
-  const rtl = render(<App />)
-
-  rtl.getByText('Row 0')
-
-  fireEvent.click(rtl.getByText('Expand Row 0'))
-
-  rtl.getByText('Row 0.0')
-  rtl.getByText('Row 0.1')
-  rtl.getByText('Row 0.2')
-
-  fireEvent.click(rtl.getByText('Expand Row 0.1'))
-
-  rtl.getByText('Row 0.1.2')
-
-  fireEvent.click(rtl.getByText('Expand Row 0.1.2'))
-
-  rtl.getByText('SubComponent: 0.1.2')
-
-  fireEvent.click(rtl.getByText('Collapse Row 0'))
-
-  expect(rtl.queryByText('SubComponent: 0.1.2')).toBe(null)
-  rtl.getByText('Expand Row 0')
-})