coffeybean Comments - Answer Overflow

// 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>

8 replies

TTCTheo's Typesafe Cult

•Created by ForcedToCode on 2/20/2025 in #questions

Tanstack table

Okay I got it

8 replies

TTCTheo's Typesafe Cult

•Created by ForcedToCode on 2/20/2025 in #questions

Tanstack table

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).

8 replies

TTCTheo's Typesafe Cult

•Created by ForcedToCode on 2/20/2025 in #questions

Tanstack table

If I'm understanding the question right, I don't think you can style directly on the column group.

8 replies

Gaming

Programming