Question 391457 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Ag-grid React + over riding selected row is not working

am using ag-grid react in my project to load the data. Where as i need to over ride when the row is selected. Am doing it inline style way due to some reason.

code

<Paper className="ag-theme-material"
sx={{
  width: "100%",
  height: "100%",
  " .ag-checkbox-input-wrapper.ag-checked::after": {
    color: theme.general_theme.purpleBlue,
  },
  " .ag-selected-row-background-color": {
    "backgroundColor": "green"
  }
}}>
<AgGrid></AgGrid>
</Paper>

In my above code the check box when its checked, it turned into my purple theme color. The same way am trying to change my selected-row color its not working. Can some one please let me know what is wrong in it.

Tags:

2

Answers


  1. 0

    1- Define a custom CSS class for selected rows.

    .custom-selected-row {
  background-color: #646cff !important;
  color: white;
}

    2- Apply the CSS Class using getRowClass

    import './customStyles.css'; 

const getRowClass = (params) => {
  if (params.node.isSelected()) {
    return 'custom-selected-row';
  }
  return '';
};

const columnDefs = [
  { field: 'make' },
  { field: 'model' },
  { field: 'price' },
];

const rowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Porsche', model: 'Boxster', price: 72000 },
];

const GridExample = () => {
  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        rowSelection="single"
        getRowClass={getRowClass}
      />
    </div>
  );
};

export default GridExample;
    Login or Signup to reply.
  2. 0

    Let try it

    < Paper
className = "ag-theme-material"
sx = {
    {
      width: "100%",
      height: "100%",
      " .ag-checkbox-input-wrapper.ag-checked::after": {
        color: theme.general_theme.purpleBlue,
      },
      "--ag-selected-row-background-color": "green", // Set the selected row color
    }
  } >
  <
  AgGrid > < /AgGrid> <
  /Paper>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search