Better approach for creating Custom Table

[talatkuyuk]

There are two approaches for creating the Custom Table Component.

(First Approach)

• Create the columns with the ColumnHelper;
• Pass the columns and the data as props into the custom table component;
• Create the table instance (with useReactTable) in the custom table component.

(Second Approach)

• Create the columns with the ColumnHelper;
• Create the table instance (with useReactTable) using the columns and the data;
• Pass the table instance as prop into the custom table component; (I am currently using this)

In the second approach, I have to deal with the table state like pagination, sizing, ordering etc. in each component which lists the records for example books, products, users etc. But some time I would like to provide a simple basic table without pagination, sizing, visibility, just basic one in order to list the records !. Also some time, I would like to provide a shimmered table skeleton while waiting the data. So in that cases, I do not have to deal with the react-table state in that components; just pass the table instance into the Custom Table without the column features, or say without the table state.

If I choose the first approach; the Custom Table is going to have the same table features (pagination-sizing-ordering etc) for all table components for even basic table ones; and I will loose the flexibility.

But, If I choose the second approach; I will need to deal with the table state for each cases as I mentioned above.

It depends the use cases.

What do you think about it?

[jonahallibone]

I have multiple tables with the same requirements in my project. I'd prefer to create one table with the pagination, loading, etc and pass the data and columns. A typesafe way of doing that would be great.

[chrisbendel]

+1 to this, also good to see you out in the wild @jonahallibone :)

[MatthewCushing]

I'm with @jonahallibone on this one. Being able to pass the columns as the props is much more powerful and can result in much cleaner components as the "table" should encapsulate the table. Doesn't make sense (in my brain and how I think about the problem) to pass a table to a table as props.