Styling

gp-grid includes built-in styles with dark mode support. You can customize the appearance using CSS.

Dark Mode

Enable dark mode with the darkMode prop:

<Grid darkMode={true} ... />

With next-themes

"use client";

import { useTheme } from "next-themes";

function ThemedGrid() {
  const { resolvedTheme } = useTheme();

  return (
    <Grid
      darkMode={resolvedTheme === "dark"}
      ...
    />
  );
}

CSS Classes

The grid uses these CSS classes for styling:

Class	Description
`.gp-grid`	Grid container
`.gp-grid-header`	Header row
`.gp-grid-header-cell`	Individual header cell
`.gp-grid-body`	Body container
`.gp-grid-row`	Row container
`.gp-grid-cell`	Individual cell
`.gp-grid-cell--active`	Active cell
`.gp-grid-cell--selected`	Selected cell
`.gp-grid-cell--editing`	Cell in edit mode

Custom Styling with CSS

Override styles in your global CSS:

/* Custom header styling */
.gp-grid-header {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.gp-grid-header-cell {
  color: white;
  font-weight: 600;
}

/* Custom selection colors */
.gp-grid-cell--active {
  outline: 2px solid #3b82f6;
}

.gp-grid-cell--selected {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Alternating row colors */
.gp-grid-row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Dark mode adjustments */
.dark .gp-grid-row:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

Tailwind CSS

With Tailwind, use @apply in your CSS:

@layer components {
  .gp-grid-header {
    @apply bg-gradient-to-r from-purple-500 to-pink-500;
  }

  .gp-grid-header-cell {
    @apply text-white font-semibold;
  }

  .gp-grid-cell--active {
    @apply ring-2 ring-blue-500;
  }
}

Dynamic Class Computation

Use the highlighting prop to dynamically compute CSS classes for rows, columns, or cells based on data or interaction state.

highlighting Prop

interface HighlightingOptions<TData> {
  computeRowClasses?: (context: HighlightContext<TData>) => string[];
  computeColumnClasses?: (context: HighlightContext<TData>) => string[];
  computeCellClasses?: (context: HighlightContext<TData>) => string[];
}

Row Classes

Apply classes to entire rows based on row data or hover state:

<Grid
  columns={columns}
  rowData={rowData}
  highlighting={{
    computeRowClasses: (context) => {
      const classes: string[] = [];

      // Zebra striping
      if (context.rowIndex !== null && context.rowIndex % 2 === 1) {
        classes.push("zebra-row");
      }

      // Hover effect
      if (context.isHovered) {
        classes.push("row-highlight");
      }

      return classes;
    },
  }}
/>

Column Classes

Apply classes to entire columns:

<Grid
  columns={columns}
  rowData={rowData}
  highlighting={{
    computeColumnClasses: (context) =>
      context.isHovered ? ["column-highlight"] : [],
  }}
/>

Cell Classes

Apply classes to individual cells:

<Grid
  columns={columns}
  rowData={rowData}
  highlighting={{
    computeCellClasses: (context) => {
      if (context.isHovered) {
        return ["cell-highlight"];
      }
      return [];
    },
  }}
/>

HighlightContext

All callbacks receive a context object with these properties:

Property	Type	Description
`rowIndex`	`number \| null`	Row index (null for column-only context)
`colIndex`	`number \| null`	Column index (null for row-only context)
`column`	`HighlightColumnInfo`	Column definition (for column/cell contexts)
`rowData`	`TData`	Row data (for row/cell contexts)
`isHovered`	`boolean`	Whether this row/column/cell is hovered
`isActive`	`boolean`	Whether this contains the active cell
`isSelected`	`boolean`	Whether this is in the selection range

For more examples, see the Highlighting Example.

Custom Cell Styling via Renderers

For dynamic styling based on data, use custom renderers:

const ConditionalRenderer = (params: CellRendererParams) => {
  const value = params.value as number;
  const color = value >= 100000 ? "text-green-600" : "text-red-600";

  return (
    <div className={`h-full flex items-center px-2 ${color}`}>
      ${value.toLocaleString()}
    </div>
  );
};

Container Styling

Style the grid container for borders, shadows, etc.:

<div className="rounded-lg overflow-hidden border shadow-lg">
  <Grid ... />
</div>

The overflow-hidden ensures rounded corners are visible.

Styling

On this page