T
TanStack•3y ago
xenial-black

Migrating from v6 to v8 - best practices/styles

I'm trying to migrate an application's tables from v6 to v8 - I've mostly got a handle on the API changes for things like columns, but I'd like to try to find some pattern to make the migration easier from a styling/rendering perspective. I don't really love the idea of taking the six or seven places where I've got: 
ReactTable
    columns={columns}
    data={data}
/
ReactTable
    columns={columns}
    data={data}
/
and just dropping in something like: 
<table>
  <thead>
    {table.getHeaderGroups().map(headerGroup => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => (
          <th key={header.id}>
            {header.isPlaceholder
              ? null
              : flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  {/* etc, etc */ }
</table>
<table>
  <thead>
    {table.getHeaderGroups().map(headerGroup => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => (
          <th key={header.id}>
            {header.isPlaceholder
              ? null
              : flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  {/* etc, etc */ }
</table>
for each one - is there some pattern that can take the table instance and render it with some default view? Or am I just supposed to build that myself? Relatedly, I'd really like the result to look like v6 , but is there some way to apply v6's styling easily, or do I just need to reverse engineer the previous version CSS code? I get the idea of a headless library, but I guess I'm hoping to find some 'head' that I can use with it so I don't have to build my own.
2 Replies
sunny-green
sunny-green•3y ago
honestly v6 and v8 are are completely different libraries you can use different component libraries
sunny-green
sunny-green•3y ago
I've made both Mantine and Material UI implementations of TanStack Table v8 you can checkout https://www.mantine-react-table.com/ https://www.material-react-table.com/
Mantine React Table
Mantine React Table, a fully featured Mantine implementation of TanStack React Table V8. Written from the ground up in TypeScript.
Material React Table
Material React Table, a fully featured Material UI V5 implementation of TanStack React Table V8. Written from the ground up in TypeScript.

Did you find this page helpful?