Wrapping/stacking columns to save horizontal space

[sm-Fifteen]

Is there a way to group columns and their respective cells in each row so that the component rendering can arrange the markup to make this sort of responsive table possible with react-table 7+?

I've seen a handful of CSS guides (1, 2) that do that by trading the standard <table> tag with <div>s or <ul>s and using flexbox or CSS grid to let the presentation of tabular data adapt more dynamically than what's normally possible with tables. However, that requires some DOM nesting that I haven't managed to figure how to reproduce in react-table. Is this sort of thing currently possible? Would it be considered a good feature/plugin to add if not?

[umarluqman]

You can use media query hooks in the useMemo function for the columns to render dynamically based on the size of the screen.

Then you can use the Cell function in Column options 👉 https://react-table.tanstack.com/docs/api/useTable#column-options

[sm-Fifteen]

But how do I declare what columns are meant to stack and/og get two cells to render on top of one another? The rendering model usually goes like this:

     <tbody {...getTableBodyProps()}>
       {rows.map(row => {
         prepareRow(row)

         return (
           <tr {...row.getRowProps()}>
             {row.cells.map(cell => {
               // Apply the cell props
               return (
                 <td {...cell.getCellProps()}>
                   {cell.render('Cell')}
                 </td>
               )
             })}
           </tr>
         )
       })}
     </tbody>

In order to get the table to render as in the examples I posted, I would need to have something wrapping two or more of those <tr> elements (whatever they are actually replaced with in practice) so the media query can make that subset of columns collapse into a vertical stack of cells. The best I can see being possible by simply altering Cell is to have individual columns contain complex objects with all the desired collapsing columns and to have custom cell rendering in order to make all of these "sub-columns" display as desired, bypassing most of the features offered by react-table in the first place.

Leaving the media queries aside for a moment, how could a row have some columns rendered as a a single column with the cells stacked vertically (hopefully while staying withing the declarative framework of react-table as much as possible)?

[umarluqman]

You don't need to have your own custom cell rendering, just use the Cell callback in the column options will do the job.

Here's an example:

const columns = useMemo(
  () =>
    isTablet
      ? [
          {
            Header: 'No.',
            accessor: 'no',
          },
          {
            Header: 'Department',
            accessor: 'name',
            Cell: ({
              row: {
                  original: { name, code },
              },
            }) => {
              return (
                <>
                  <p>{name}</p>
                  <p>{code}</p>
                </>
              );
            },
          },
        ]
      : [
          {
            Header: 'No.',
            accessor: 'no',
          },
          {
            Header: 'Department Code',
            accessor: 'code',
          },
          {
            Header: 'Department Name',
            accessor: 'name',
          },
        ],
  [isTablet]
);

[sm-Fifteen]

Sure, but then those are considered to be a single column, so I lose the ability to pick which one to sort by. Imagine I have a list of forum threads with these columns:

                [
                    {
                        Header: 'Thread title',
                        accessor: 'title',
                    },
                    {
                        Header: 'Latest post',
                        accessor: (thread) => thread.latest.date,
                    },
                    {
                        Header: 'Latest post by',
                        accessor: (thread) => thread.latest.author,
                    },
                    {
                        Header: 'Created on',
                        accessor: (thread) => thread.first.date,
                    },
                    {
                        Header: 'Created by',
                        accessor: (thread) => thread.first.author,
                    },
                ]

...where I want the columns to be stacked so I have 'Thread title', ['Latest post','Latest post by'] and ['Created on','Created by'] as the 3 column groups in my table so that dates and authors are always stacked one on top of the other.

If I use Cell to define custom rendering like you are (what is the Cell callback if not that?), I lose the ability to sort and/or filter by date and by author independently. I would have to define custom filter and sort functions that use one or the other, since I don't have stacked headers to let the user figure out what column to sort/filter by (or even figure out what the stacked columns are, like in the examples from my original post).

Now, in a real forum you probably wouldn't be able to sort threads like that, of course, I'm just using that example to convey the idea of correlated but still independently sortable columns.

[umarluqman]

Oh I get what you mean, you can actually pass jsx to the Header in the column function but then you still don't have the ability to sort using React Table built-in function as it can only be sorted by the accessor.

I think that would be possible only if using custom sorting and I don't think it will be supported as a plugin as it is an edge case.

[sm-Fifteen]

Yeah, ok, thank you for confirming this for me.

Being able to have column groups actually wrap the column cells and headers they render with their own markup would go a long way in enabling per-group styling and group collapsing in extensions for non-<table> rendering (I'd imagine column definitions with a columns element could have a wrap or collapse parameter for that when using certain layout plugins), though it would require some form of recursive rendering to work and would probably need to be its own thing, separate from tableRow.cells.

Responsive design is one thing plain HTML tables do notoriously poorly, since the semantics of <table> elements pretty much mandate a 2D presentation, so support for more flexible layouts would definitely be an interesting feature to add to react-table, in my opinion.