Highlights usage

This guide is based on getting started .

Highlights allow you to alter arbitrary cells in the grid by applying custom CSS classes to them or by setting their border colours.

  1. Import the Highlight interface

import { ReactGrid, Highlight } from "@silevis/reactgrid";
  1. Define an array of Highlight objects

const highlights: Highlight[] = [
  { columnId: "Name", rowId: 1, borderColor: "#00ff00" },
  { columnId: "Surname", rowId: 2, borderColor: "#0000ff" },
  { columnId: "Name", rowId: 3, borderColor: "#ff0000" }
  1. Pass the highlights object array to your component

return <ReactGrid rows={rows} columns={columns} highlights={highlights} />;

Live demo