Floating Cell

Graphite Grid supports a floating row, which is a row beneath the grid's header but above the main rows. Each column has a floating cell where any arbitrary content may be displayed.

To enable the floating row, set the floatingRowEnabled property to true. This value may be toggled. The floatingRowHeight property of the Grid determines the height of the floating row.

Tip

Floating cells are typically used for contextual column filters. However, in Graphite Grid, a floating cell may contain any valid content, so it is not limited to contextual column filters.

Specifying a Floating Cell

The floatingCellRenderer property on the column definition specifies the content to display within a floating cell. The example below specifies a custom floating cell for the Ticker Symbol component. This custom cell links to an explanation of stock symbols.

Info

The example below uses Recharts, a fantastic open-source React charting library.

The OpenPriceChart renderer borrows from this example in the Recharts documentation.

function TickerSymbolFloatingCell<T>(params: HeaderParams<T>) {
  return (
    <a
      className="w-full inline-block text-center h-full"
      href="https://www.investopedia.com/terms/s/stocksymbol.asp"
    >
      Learn More
    </a>
  );
}
 
function OpenPriceChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <AreaChart
        width={200}
        height={60}
        data={data}
        margin={{
          top: 5,
          right: 0,
          left: 0,
          bottom: 5,
        }}
      >
        <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
      </AreaChart>
    </ResponsiveContainer>
  );
}
 
export function FloatingCell() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "Ticker Symbol",
          field: 0,
          floatingCellRenderer: TickerSymbolFloatingCell,
        },
        { id: "Open Price", field: 1, floatingCellRenderer: OpenPriceChart },
        { id: "Close Price", field: 2 },
        { id: "Volume", field: 3 },
        { id: "Market Cap", field: 4 },
      ],
      floatingRowEnabled: true,
      floatingRowHeight: 30,
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Floating Row Height

The floatingRowHeight property determines the height of the floating row in pixels. The value provided may be a number or the value "auto".

Best practice

When floatingRowHeight is "auto", turning off column header virtualization is usually preferable. Graphite Grid relies on the browser's height calculations to determine the height of the floating row when "auto" is used. If column virtualization is on, not all the columns will be present in the DOM, which can result in layout shifts as the user scrolls horizontally.

To turn off column header virtualization, use the virtualizeColumnHeaders setting in the grid state.

const grid = useGraphiteGrid({
  initial: {
    virtualizeColumnHeaders: false,
    // other grid properties
  },
});