⚛️ Hooks for building fast and extendable tables and datagrids for React

Hi, First, I'm trying v7, it's awesome to work with Hooks! Trying it for the first time so my comments might be wrong.

Describe the bug This are more of an architecture comment than a bug: If you disable useExpanded hook, the table breaks. ~~I know in userland you can't disable this hook but the fact that this happens,~~ (edit: actually you can) probably demonstrates wrong app design: I figured out this is happening because you're building initial state within the useExpanded hook (row.cells = ...).

Expected behavior I think that adding or removing hooks should not break the entire component. Hooks should be encapsulated.

Codesandbox! https://codesandbox.io/s/nk9rmym6m4

Solution That initial state logic could be within useTable itself (tested and works fine). I can provide a PR if needed.

Hi all,

I'd like to start by saying thank you to all the maintainers and contributors of this package 💯 and also apologies for not using the issue template format, wasn't quite sure if this was a bug or a feature request.

I've been trialling the v7 branch, and overall its really really impressive 🙌 The only part that seemed a little ... lacking was the Typescript types. This was not a huge issue, as I was able to create my own types file that the compiler merges with the types provided by react-table (using declaration merging)

I noticed that beta 12 has recently been released, and I updated (from beta 10). Unfortunately, it seems that the situation has somewhat worsened from a developer experience perspective. I'm assuming the changes were made in order to better handle the fact that any number of plugin hooks might be specified by a user. However, these changes seem to have come at the cost of requiring users to include a custom types file in their projects (which is a little unusual, even for Typescript projects).

In an ideal world, it'd be great to see react-table written natively in Typescript to avoid situations where the code and types are not in sync, but I do understand that might not be what the maintainers/contributors want. That said, the procedure in beta 12 seems like it could be improved, and I'm happy to help 😄 I'm including my additions to the types file from beta 10 that mostly fixed the plugin issues, as well as adding a few other missing types. There are some definite improvements in the beta 12 types, so it'd be good to see if we can find some middle ground.

import {
  Row,
  TableInstance,
  TableOptions,
  useGroupBy,
  useFilters,
  useSortBy,
  useExpanded,
  usePagination,
  useRowSelect,
  useRowState,
  useColumnOrder,
  useBlockLayout,
  useAbsoluteLayout,
  useResizeColumns,
  Column,
} from "react-table";

declare module 'react-table' {
  export interface TableInstance<D = {}> extends TableOptions<D> {
    getTableBodyProps: (userProps?: any) => any
    selectedFlatRows: Row<D>[]
  }

  export interface HeaderColumn<D> {
    disableFilters?: boolean;
  }

  export interface EnhancedColumn<D>
    extends Omit<Column<D>, 'columns'>,
      TableInstance<D> {
    canFilter?: boolean
  }

  export interface UsePaginationValues<D = {}> {
    pageOptions: number[]
  }

  export type Plugin<D> = useGroupBy<D> |
    useFilters<D> |
    useSortBy<D> |
    useExpanded<D> |
    usePagination<D> |
    useRowSelect<D> |
    useRowState<D> |
    useColumnOrder<D> |
    useBlockLayout<D> |
    useAbsoluteLayout<D> |
    useResizeColumns<D>

  export function useTable<D = {}, P = Plugin<D>>(
    props: TableOptions<D>,
    ...plugins: P[]
  ): TableInstance<D> & ReturnType<typeof P>

  export function useRowSelect<D = {}>(
    props: TableOptions<D>
  ): TableOptions<D>
}

Describe the bug Live https://codesandbox.io/s/6l7op9lovr After input value change, input is losing focus and we cannot type in more than 1 letter. When downgrade to 6.8.6 input is not losing focus after typing in 1 letter

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/6l7op9lovr website
2. Click first input
3. try to write more than 1 letter in input
4. check that input has lost focus
5. downgrade to 6.8.6
6. Click first input
7. try to write more than 1 letter
8. notice that it s possible now

Hey,

Just started using react-table and wanted to say thanks for such a great job. Customization is so well through-out that I’m just enjoying working with it: I can change almost every detail to adapt the table for design requirements; and, at the same time, I need to change only a small number of things because defaults also work very well. And the number of features just blows my mind.

Thank you. Such an amazing job.

So some of this is still broken. I attempted to read through all the API Docs and through most of the source to rid the typings of any and anything missing in the typings.

Looking for feedback on how I have broken this stuff down and ways we could improve it.

I have broken all hooks down to:

• The hook function
• Options
• Hooks
• State
• Column Options
• Instance Props
• Column Props
• HeaderGroup Props
• Row Props
• Cell Props

I'm still iterating on some ways to make the plugin/composable nature easier to work with on a per-table basis.

/cc @ggascoigne

In Version 7:

Describe the bug Setting show to false in the column appears to have no effect

To Reproduce Steps to reproduce the behavior:

//In code useTable({columns: [{accessor: "uid", Header: "uid", show: false}], data})

Result: column uid is still visible.

Expected behavior The column with show: false to not be visible

Codesandbox! codesandbox

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser firefox
• Version 71.0

Additional context

Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined.

React table unable to get the data since last update & throwing above error.

Issue since: Version 6.11.2

Not reproducible till Version 6.10.3

Add functionality for a new hook called useGridLayout. Other Layout hooks require the layout to be driven by the individual cells and row wrappers. This hook allows for a more stripped down markup and lets the top level div control the layout while still allowing individual cells and headerCells to control themselves. This works with useResizeColumns while not editing the useResizeColumns hook itself.

What version of React-Table are you using?

react-table 6.5.3 react: 15.6.1 webpack: 3.4.1

What bug are you experiencing, or what feature are you proposing?

react-table looks good in Mozilla, Edge and IE, but not in Chrome (61.0) I have taken the exact same code as in this example: Simple Table and haven`t modified anything here. I haven't added, modified or changed the code.

I can see the pagination-bottom div, but not the <div class=rt-table>. It seems that the div class=rt-table is only 1px in size above the pagination-bottom div. (Css problem?)

A picture how it looks in Chrome

In the console: I don`t get an error in the console of chrome, and I see the data in the table.

I have no idea why the div rt-table doesn`t show up. I have also tried to set a fix height:

 style={{
height: "800px" // This will force the table body to overflow and scroll, since there is not enough room
 }}	

I have also tried to change the import css to the old style: import "react-table/react-table.css"; ->

Nothing changed

Hi

Sorry if this exists already, but I think it would be nice to be able to pass a custom sort function for a column, probably as part of the columns configuration object e.g:

const  columns =[{
    accessor:"foo",
    header:"Foo",
    sortable:true,
    sortFunction: (a, b) => a > b ? 1 : -1},
...]

Describe the bug (required)

In react-table v7.0.0, cells of the table are rendered empty only in production builds of the app, but works in the development server

Provide an example via Codesandbox! (required) Example: Virtualized-Rows sandbox works fine when run in development mode. But, when run by building the project(yarn build), the cells are empty.

Steps To Reproduce (required) Steps to reproduce the behavior:

Build the project and the run the built version, the cells of the table are empty

Expected behavior (Recommended) The built version should works exactly as the development version, the cells of the table should be rendered correctly.

Screenshots

When run locally(development version)

When run after building(production version)

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 80

Smartphone (please complete the following information): N/A

Additional context React Table version: v7.0.0

Works fine on v7.0.0-rc.10

Describe the bug

I dont know if this is a bug or changed behaviour since v7.

1. I have a data object value 'caseDate' which is used as row.caseDate.slice(-4) to get the year for the 'year' column.
2. I have a date column where the same caseDate is formatted as a pretty date and parsed to getTime for sorting in accessorFn.
3. I have the 'year' column grouped.
4. If I use the 'date 'column as a default sorting the 'year' grouped column is just sorted as the data comes in instead of also sorted by date because it also uses caseDate. In v7 this was the case and would also order the grouped column.

Your minimal, reproducible example

https://codesandbox.io/s/optimistic-rhodes-2bbzse?file=/src/main.tsx

Steps to reproduce

Just see how the year column is not sorted as the date column.

Expected behavior

I would expect this to work the same as in v7 or a clear explanation why this logic has changed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome MacOs

react-table version

v8.7.4

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Describe the bug

I've been having trouble running yarn tsc since the integration of React Table. By isolating things progressively, I found a typing issue.

When I'm using a type that calls itself twice, the yarn tsc runs endlessly. However, react-scripts start builds well, even if the type checking does never validate.

Your minimal, reproducible example

https://codesandbox.io/s/cold-browser-rib95e

Steps to reproduce

With a Create React App

• Put this in your code:

type User = {
  father?: User,
  brother?: User,
}

const columnHelper = createColumnHelper<User>()

• Run yarn tsc
• It is stuck at [21:39:37] File change detected. Starting incremental compilation.. for long minutes.

Expected behavior

It should not take as much time.

With this code:

type User = {
  father?: User,
  brother?: User,
}

const columnHelper = createColumnHelper<User>()

yarn tsc takes 3 minutes to run

With this code:

type User = {
  id: string
}

const columnHelper = createColumnHelper<User>()

yarn tsc takes 6 seconds to run

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS
• React Table: 8.7.4
• Node: 16.17.1

react-table version

v8.7.4

TypeScript version

v4.1.2

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Describe the bug

Global filter functionality is not working.

Your minimal, reproducible example

https://codesandbox.io/s/immutable-morning-pwg0l8?file=/src/App.tsx

Steps to reproduce

1. Go to: https://codesandbox.io/s/immutable-morning-pwg0l8?file=/src/App.tsx
2. Write in the input

Expected behavior

1. The Results are affected by the filter value

How often does this bug happen?

Every time

Screenshots or Videos

https://codesandbox.io/s/immutable-morning-pwg0l8?file=/src/App.tsx

Platform

All

react-table version

8.7.4

TypeScript version

No response

Additional context

8.7.4

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Since PR #4407 undefined nested keys throw an error message. This might be helpful, but does not solve the issue when you have to work with data which looks like

[
  { "firstName": "John", "address": { "street": "Main street 1" } },
  { "firstName": "Jane", "address": null }
]

accessor address.street in this case will throw the error in dev. (or will break the application later in production in case the data here is not as complete)

So the suggestion from @dennemark in issue #4499 makes sense to me. This PR will return a null value, if the nested value does not exist. Optionally, there could also be a console.warn statement with what used to be the error message.

Fixes: #4499

Describe the bug

I created table and it just keeps re-rendering, not really sure why

Your minimal, reproducible example

https://codesandbox.io/s/mantine-playground-forked-pslviy?file=/src/App.tsx:0-3415

Steps to reproduce

1. Run the codesandbox
2. Click on one of the table headers
3. The component keeps re-rendering

Expected behavior

Table shouldn't be re-rendered unless content/data was changed

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, happens in both safari and chrome

react-table version

v8.7.4

TypeScript version

v4.9.3

Additional context

Found out that if the data property that I pass to useReactTable is wrapped in useMemo the problem resolves, but why?

const table = useReactTable({
		data: useMemo(() => [], []), // stops the problem from happening
                ...
})

also if you comment out the <tbody> jsx the problem stops

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.