Highlights – React Grid Docs

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.

Import the Highlight interface

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" },
];

Pass the highlights object array to your component

return (
  <ReactGrid
    rows={rows}
    columns={columns}
    highlights={highlights} // highlight-line
  />
);

Live demo

Code

const HighlightsSample = () => {
  const [columns, setColumns] = React.useState<Column[]>(() => [
    { columnId: "Name", width: 100 },
    { columnId: "Surname", width: 100 }
  ]);
  
  const [rows, setRows] = React.useState<Row[]>(() => [
    {
      rowId: 0,
      cells: [
        { type: "header", text: "Name" },
        { type: "header", text: "Surname" }
      ]
    },
    {
      rowId: 1,
      cells: [
        { type: "text", text: "Thomas" },
        { type: "text", text: "Goldman" }
      ]
    },
    {
      rowId: 2,
      cells: [
        { type: "text", text: "Susie" },
        { type: "text", text: "Spencer" }
      ]
    },
    {
      rowId: 3,
      cells: [
        { type: "text", text: "" },
        { type: "text", text: "" }
      ]
    }
  ]);
  
  const highlights: Highlight[] = [
    { columnId: "Name", rowId: 1, borderColor: "#00ff00" },
    { columnId: "Surname", rowId: 2, borderColor: "#0000ff" },
    { columnId: "Name", rowId: 3, borderColor: "#ff0000" }
  ];
  
  return (
    <ReactGrid
      rows={rows}
      columns={columns}
      highlights={highlights}
    />
  );
}

render(<HighlightsSample/>)

Preview

Handling data changes Internationalization