Row Detail (Master Detail)

Row Detail allows for arbitrary content to be displayed below a row. To enable row detail, set the rowDetailEnabled property to true on the grid state. Graphite Grid is unopinionated about the content that should be displayed in the detail view. When setting rowDetailEnabled to true, provide a detail renderer to the grid via the rowDetailRenderer property on the grid state.

Info

The GraphiteGridCanvas renderer supports row detail views but is rendered via a portal element positioned within the viewport. This means the view is a component not drawn on an HTML canvas.

This is almost always desired. However, create a detailed view using a <canvas /> element if an HTML canvas is required.

export function RowDetailDemo() {
  const grid = useGraphiteGrid({
    initial: {
      rowDetailEnabled: true,
      rowDetailRenderer: ({ row }) => {
        return (
          <div className="flex flex-col gap-2 p-4 h-full">
            <div>Showing Row: {row?.rowIndex}</div>
            <div className="h-[80%] w-full">
              <Chart />
            </div>
          </div>
        );
      },
      // other props
    },
  });
 
  return (
    <div className="h-[400px] border-t border-border/20">
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Info

In the above example, the components are styled using tailwindcss, but you can use any styling method.

The <Chart/> component contains dummy data that is the same for all rows and is based on this Recharts example.

When row detail is enabled:

Graphite Grid adds a detail expansion column to the start of the grid. This column cannot be removed and is used to toggle the row detail open or closed.
Any expanded row details push the rows below them down.
The row detail views are pinned to the viewport's start and will be as wide as the viewport. The horizontal scroll of the grid does not impact the row detail view.

Row Detail Height

By default, the height of a row detail element is fixed at 200px. You can change this using the rowDetailHeight property on the grid state. This property may be a number or "auto". When "auto" is set, the height of the detail view will be determined by its content.

export function RowDetailHeight() {
  const grid = useGraphiteGrid({
    initial: {
      rowDetailHeight: "auto",
      // other props
    },
  });
  // ...
}

Row Detail Enabling

The rowDetailEnabled property is usually set to a Boolean value, but it may also be a function that selectively enables row detail only for specific rows. This is useful for cases where some rows have a detailed view, and others do not.

export function RowDetailSelective() {
  const grid = useGraphiteGrid({
    initial: {
      // Only enable row detail for even-numbered rows
      rowDetailEnabled: (p) => (p.row?.rowIndex ?? 0) % 2 === 0,
    },
  });
  // ...
}

Detail Cell Renderer

Use the detailCellRenderer and detailCellCanvasDrawFunc to change the content rendered in the detail expansion column. The rendered content is only a visual change and does not impact the detail expansion functionality.

export function RowDetailCellRenderer() {
  const grid = useGraphiteGrid({
    initial: {
      detailCellRenderer: ({ isExpanded }) => {
        return (
          <div
            className="flex items-center justify-center w-full h-full"
            style={{ transform: `rotate(${isExpanded ? 90 : 0}deg)` }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              width={16}
              height={16}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
              />
            </svg>
          </div>
        );
      },
      // other props
    },
  });
  // ...
}