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

import { ReactGrid, Highlight } from "@silevis/reactgrid";

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} />;

Live demo

Code

interface Person {
  name: string;
  surname: string;
}

const getPeople = (): Person[] => [
  { name: "Thomas", surname: "Goldman" },
  { name: "Susie", surname: "Quattro" },
  { name: "", surname: "" }
];

const getColumns = (): Column[] => [
  { columnId: "name", width: 150 },
  { columnId: "surname", width: 150 }
];

const headerRow: Row = {
  rowId: "header",
  cells: [
    { type: "header", text: "Name" },
    { type: "header", text: "Surname" }
  ]
};

const getRows = (people: Person[]): Row[] => [
  headerRow,
  ...people.map<Row>((person, idx) => ({
    rowId: idx,
    cells: [
      { type: "text", text: person.name },
      { type: "text", text: person.surname }
    ]
  }))
];

const highlights: Highlight[] = [
  { columnId: "name", rowId: 0, borderColor: "#00ff00" },
  { columnId: "surname", rowId: 1, borderColor: "#0000ff" },
  { columnId: "name", rowId: 2, borderColor: "#ff0000" }
];

function App() {
  const [people] = React.useState<Person[]>(getPeople());
  const rows = getRows(people);
  const columns = getColumns();

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

render(<App />, document.getElementById("root"));

Preview

Handling data changes Internationalization