worthy-azure

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

TanStack/Table

example suggests that using

getIsExpanded()

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?

TanStack•3y ago

worthy-azure

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

TanStack/Table

example suggests that using

getIsExpanded()

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?

Expandable children row

Similar Threads

Expandable children row

Similar Threads

Similar Threads

Similar Threads