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.

TanStack•3y ago•

3 replies

standard-azure

Migrating from v6 to v8 - best practices/styles

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>

Migrating from v6 to v8 - best practices/styles

Similar Threads

Migrating from v6 to v8 - best practices/styles

Similar Threads

Similar Threads

Similar Threads