How to use rowRenderer from react-data-grid

[GiuseppeFantoni]

Currently I have this dataGrid component from react-data-grid Addazle. In it I pass a property that calls rows={rows.showed}, rows.showed is an Array.

showed: [{
    "id": 30,
    "title": "Serra Norte",
    "anchor": null,
    "level": 5,
    "isGranular": false,
    "columns": [...someValue],
    "isExpanded": true,
    "hasChildren": true
}, {...}]

Currently the code works correctly, but now I need to change the background color of some rows, and I saw in the documentation that to do this I need to use rowRenderer

import React, { useContext, useState } from "react";
import ReactDataGrid from "react-data-grid";

import { DataGridContext } from "./context/DataGridContextProvider";
import { Row, DataGridProps } from "./types";

import "./styles/DataGrid.css";
import "./styles/Grid.css";

const DataGrid = (props: DataGridProps): JSX.Element => {
  const {
    className,
    columns,
    rowHeight,
    headerRowHeight,
    handleRowChange,
    ...others
  } = props;
  const { rows } = useContext(DataGridContext);

  const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(
    () => new Set(),
  );

  return (
    <ReactDataGrid
      {...others}
      className={className}
      onSelectedRowsChange={setSelectedRows}
      rowKeyGetter={(row: Row) => row.id}
      columns={columns}
      rows={rows.showed}
      rowHeight={rowHeight}
      headerRowHeight={headerRowHeight}
      selectedRows={selectedRows}
      onRowsChange={handleRowChange}
    />
  );
};

export { DataGrid };

https://codesandbox.io/s/rdg-cell-editing-forked-4vx3rl?file=/src/index.js:792-803 In this link the person uses rowsRenderer, but I could not adapt to my code in tsx

In this last link there is how I would like the table to be

https://adazzle.github.io/react-data-grid/#/all-features

Just a few colored lines

Here is my code of my last attempt:

import React, { useContext, useState } from "react";
import ReactDataGrid, { Row as RowGrid } from "react-data-grid";

import { DataGridContext } from "./context/DataGridContextProvider";
import { Row, DataGridProps } from "./types";

import "./styles/DataGrid.css";
import "./styles/Grid.css";

const DataGrid = (props: DataGridProps): JSX.Element => {
  const {
    className,
    columns,
    rowHeight,
    headerRowHeight,
    handleRowChange,
    ...others
  } = props;
  const { rows } = useContext(DataGridContext);

  const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(
    () => new Set(),
  );

  const RowRenderer = (rows: any) => {
    console.log(props);
    return <RowGrid {...rows.showed} />;
  };

  return (
    <ReactDataGrid
      {...others}
      className={className}
      onSelectedRowsChange={setSelectedRows}
      rowKeyGetter={(row: Row) => row.id}
      columns={columns}
      rowRenderer={RowRenderer(rows)}
      rowHeight={rowHeight}
      headerRowHeight={headerRowHeight}
      selectedRows={selectedRows}
      onRowsChange={handleRowChange}
    />
  );
};

export { DataGrid };

But i get that error enter image description here

At the moment I just wanted a simple code using rowRenderer that works,

[acasmp]

This answer might be 2 years too late, but I went down into the same situation because of a stackoverflow post mentioning rowRenderer that this component does not support.

The way you pull this off is by following the code from the same example linked in the question, that is: https://github.com/adazzle/react-data-grid/blob/main/website/demos/AllFeatures.tsx

In particular this is what does the magic:
rowClass={(row, index) => row.id.includes('7') || index === 0 ? highlightClassname : undefined }

In my case I defined my css class like:

.focused-row {
  .rdg-cell {
    background-color: #861d1d;
    color: white;
  }

  &:hover .rdg-cell {
    background-color: #a04747;
  }
}

and passed it like a simple string instead of adding another dependency to my project for linaria