passive-yellow

Expandable children row

My goal is to show a non-expandable row for the root item, while allowing expandability for its child items to display pertinent details. From what I understand, the TanStack/Table example suggests that using getIsExpanded() applies to all columns, including Name, with no option to exclude specific columns.

{
  header: "Name",
  footer: (props) => props.column.id,
  columns: [
    {
      id: "expander",
      header: () => null,
      cell: ({ row }) => {
        return row.getCanExpand() ? (
          <button
            {...{
              onClick: row.getToggleExpandedHandler(),
              style: { cursor: "pointer" }
            }}
          >
            {row.getIsExpanded() ? "👇" : "👉"}
          </button>
        ) : (
          "🔵"
        );
      }
    },
  ]
}

{
  header: "Name",
  footer: (props) => props.column.id,
  columns: [
    {
      id: "expander",
      header: () => null,
      cell: ({ row }) => {
        return row.getCanExpand() ? (
          <button
            {...{
              onClick: row.getToggleExpandedHandler(),
              style: { cursor: "pointer" }
            }}
          >
            {row.getIsExpanded() ? "👇" : "👉"}
          </button>
        ) : (
          "🔵"
        );
      }
    },
  ]
}

Can you please tell me if it's possible to achieve what's displayed in the screenshot?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Expandable children row

Did you find this page helpful?