fascinating-indigo

Good expanded row examples

Having a tough time with the docs here. Surprise since the query docs are so great! I'm looking for a good codebox example that allows grouped rows with more cols than the table.

4 Replies

subsequent-cyan•3y ago

I find it best to look into examples in docs (https://tanstack.com/table/v8/docs/examples/react/grouping). It looks like here some column values are hidden when grouped, but columns still appear. I feel like this is good for readability. If needed you can probably create columns with empty headers

React Table Grouping). Example | TanStack Table Docs

An example showing how to implement Grouping). in React Table

subsequent-cyan•3y ago

So looking at the modified example from website if you'd want "more columns" turn this.

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        header: () => <span>Last Name</span>,
        cell: info => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        aggregatedCell: ({ getValue }) =>
          Math.round(getValue<number>() * 100) / 100,
        aggregationFn: 'median',
      },
      {
        accessorKey: 'status',
        header: 'Status',
      },
    ],
    []
  )

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        header: () => <span>Last Name</span>,
        cell: info => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        aggregatedCell: ({ getValue }) =>
          Math.round(getValue<number>() * 100) / 100,
        aggregationFn: 'median',
      },
      {
        accessorKey: 'status',
        header: 'Status',
      },
    ],
    []
  )

into this.

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        header: () => <span>Last Name</span>,
        cell: info => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        aggregatedCell: ({ getValue }) =>
          Math.round(getValue<number>() * 100) / 100,
        aggregationFn: 'median',
      },
      {
        accessorKey: 'status',
        header: '',
      },
    ],
    []
  )

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        header: () => <span>Last Name</span>,
        cell: info => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        aggregatedCell: ({ getValue }) =>
          Math.round(getValue<number>() * 100) / 100,
        aggregationFn: 'median',
      },
      {
        accessorKey: 'status',
        header: '',
      },
    ],
    []
  )

Here "status" would be hidden for grouped rows since there's no defined way to aggregate it, but will show up for specific rows. You also are hiding the header so it looks like there's more columns but it's always there. you Could also combine grouping with hiding columns I guess

fascinating-indigoOP•3y ago

thanks thanks I'll take a closer look. I may need to dip back into the docs to get a more solid understanding of the columns api etc and I'm guessing we could combine this with the expanded subrows api as well?

subsequent-cyan•3y ago

probably yeah, I haven't done stuff with grouping but it there's a lot of examples overall

Gaming

Programming

Good expanded row examples

Did you find this page helpful?