Tanstack table

Can I add style to column group border in tanstack table?

3 Replies

If I'm understanding the question right, I don't think you can style directly on the column group. I would create an array of each column group and then check if each column is in that array in the column def. Then if that column is, then apply the right border you're looking for (as long as it's not the last column I'm assuming). Okay I got it

// create new list of columns that need right border using their ID
const columnGroupBorderList = ['hello', 'info', 'lastName', 'progress'];

/************ lots of code in-between ************/

  return (
    <div className="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                  /************ apply styling here ************/ 
                  style={{
                    borderRight: columnGroupBorderList.includes(
                      header.column.id
                    )
                      ? '1px solid red'
                      : undefined,
                  }}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td
                  key={cell.id}
                  /************ and apply styling here ************/ 
                  style={{
                    borderRight: columnGroupBorderList.includes(
                      cell.column.id
                    )
                      ? '1px solid red'
                      : undefined,
                  }}
                >
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>

// create new list of columns that need right border using their ID
const columnGroupBorderList = ['hello', 'info', 'lastName', 'progress'];

/************ lots of code in-between ************/

  return (
    <div className="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                  /************ apply styling here ************/ 
                  style={{
                    borderRight: columnGroupBorderList.includes(
                      header.column.id
                    )
                      ? '1px solid red'
                      : undefined,
                  }}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td
                  key={cell.id}
                  /************ and apply styling here ************/ 
                  style={{
                    borderRight: columnGroupBorderList.includes(
                      cell.column.id
                    )
                      ? '1px solid red'
                      : undefined,
                  }}
                >
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>

coffeybean•2w ago

that gives you something like this

coffeybean•2w ago

to not show a border on the last group, just exclude those column IDs from the list LMK if that works and if it makes any sense for your problem! 😁

Gaming

Programming

Tanstack table

Did you find this page helpful?