Cell Styling

The cellTheme property on the column definition can override the base cell styles for a particular column. Before reading this guide, ensure you have read the guide on Grid Theming.

The cellTheme property can be a static object value or a function that returns the theme override. An example is shown below:

export function CellStylingExample() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "Alpha",
          field: 0,
          cellTheme: {
            fontFamily: "monospace",
            fontWeight: "bolder",
          },
        },
        {
          id: "Beta",
          field: 1,
          cellTheme: ({ column, row }) => {
            const value = row.data[column.field];
 
            if (value < 0) {
              return {
                color: "#f20404",
                fontWeight: "bolder",
                keyedThemes: {
                  dark: {
                    color: "#ea8080",
                  },
                },
              };
            } else {
              return {
                color: "#008b23",
                fontWeight: "bolder",
                keyedThemes: {
                  dark: {
                    color: "#f0f679",
                  },
                },
              };
            }
          },
        },
        // other props
      ],
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

The value of the cellTheme is merged with the grid's cell theme, so only the values that differ from the full theme need to be defined. The keyedThemes property can be used to define variants based on the current theme key of the grid.

Info

Graphite Grid provides the cellTheme object rather than CSS styling to ensure themes work across the DOM and Canvas renderers. Furthermore, providing concrete values for themes allows Graphite Grid to optimize styling calculations and calculate automatic column widths.

If a specific set of CSS styles should be applied, a custom cell renderer can do this.