Styling – React Grid Docs

Styling ReactGrid

In version 5, ReactGrid introduces the RGTheme interface, allowing you to apply a theme directly to the grid. You can also customize styles by passing them through individual cell properties or using standard CSS.

interface RGTheme {
  gap: {
    width: React.CSSProperties["width"];
    color: React.CSSProperties["color"];
  };
  paneContainer: {
    top: {
      background: React.CSSProperties["backgroundColor"];
      boxShadow: React.CSSProperties["boxShadow"];
    };
    right: {
      background: React.CSSProperties["backgroundColor"];
      boxShadow: React.CSSProperties["boxShadow"];
    };
    bottom: {
      background: React.CSSProperties["backgroundColor"];
      boxShadow: React.CSSProperties["boxShadow"];
    };
    left: {
      background: React.CSSProperties["backgroundColor"];
      boxShadow: React.CSSProperties["boxShadow"];
    };
  };
  cellContainer: {
    padding: Padding;
    background: React.CSSProperties["backgroundColor"];
  };
  area: {
    border: Border;
  };
  focusIndicator: {
    background: React.CSSProperties["backgroundColor"];
    border: Border;
  };
  fillHandle: {
    background: React.CSSProperties["backgroundColor"];
    border: Border;
  };
  line: { backgroundColor: React.CSSProperties["backgroundColor"]; size: number | string };
  shadow: { backgroundColor: React.CSSProperties["backgroundColor"] };
  resizeColumn: {
    default: React.CSSProperties;
    hover: React.CSSProperties;
  };
  selectionIndicator: {
    background: React.CSSProperties["backgroundColor"];
    border: Border;
  };
  gridWrapper: React.CSSProperties;
}

Live example

Code


const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };

  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const columns = getColumns();
  const cells = generateCells(people, updatePerson);

  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        cells={cells}
        styles={rgStyles}
      />
    </div>
  );
};

const rgStyles = {
  focusIndicator: {
    border: {
      color: "#32a852",
      width: "2px",
      style: "solid",
    },
  },
  selectionIndicator: {
    background: "rgba(144, 238, 144, 0.1)",
    border: {
      color: "#81df9b",
      style: "solid",
    },
  },
  fillHandle: {
    background: "transparent",
    border: {
      color: "#32a852",
      style: "dashed",
    },
  },
  gridWrapper: {
    fontSize: 16,
    fontFamily: "Roboto, sans-serif",
  },
};


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

Preview

Create your own cell template ReactGridAPI