T
TanStack•2y ago
like-gold

Group/Section off data based on values not on the table

Hi! How would I go about doing this? In this example, I want the sender details and their message be shown in the table in a way that they're grouped by the month that the message was sent. The date is not seen on the table but is available when rendering the table. Thank you!
No description
6 Replies
broad-brown
broad-brown•2y ago
like-gold
like-goldOP•2y ago
Thank you! May I ask tho, sorry if this is such an obvious question, what was the <Stack> component?
adverse-sapphire
adverse-sapphire•2y ago
That looks like they’re using Chakra-UI for layout. A Stack component is a layout group of div items. See here for reference: https://chakra-ui.com/docs/components/stack
Chakra UI: Simple, Modular and Accessible UI Components for your React Applications.
Stack
Stack is a layout component used to group elements together and apply a space between them.
From An unknown user
From An unknown user
broad-brown
broad-brown•2y ago
We use MUI a stack is nothing more than a div container which has flex box attributes to vertically stack the children unless direction is row than it will stack horizontally (flex-direction: row vs column)
like-gold
like-goldOP•2y ago
Hi! I just got back to trying to implement this but colSpan is not working. Would you happen to know why? :manifest: 
rows.map((row) => (
  <>
    <TableRow>
      <TableCell colSpan={row.getVisibleCells().length}>
        {row.original.dateSent}
      </TableCell>
    </TableRow>

    <TableRow>
      {row.getVisibleCells().map((col) => (
        <TableCell>
          {flexRender(
            cell.column.columnDef.cell,
            cell.getContext(),
          )}
        </TableCell>
      ))}
    </TableRow>
  </>
 ))
rows.map((row) => (
  <>
    <TableRow>
      <TableCell colSpan={row.getVisibleCells().length}>
        {row.original.dateSent}
      </TableCell>
    </TableRow>

    <TableRow>
      {row.getVisibleCells().map((col) => (
        <TableCell>
          {flexRender(
            cell.column.columnDef.cell,
            cell.getContext(),
          )}
        </TableCell>
      ))}
    </TableRow>
  </>
 ))
Here is more or less the code I'm trying. For now I just rendered it per row to see the supposed grouping. I'll fixed that after I get the "grouping" to actually take up all the columns Oh! I finally got it to work, thank you very much! Only thing left to do it to sort the grouping itself. :heart:
sensitive-blue
sensitive-blue•16mo ago
@Jayes Can you share the code that work for you, I had the same issue ? anybody please help ?

Did you find this page helpful?