Resolved: how to style different tables ag-grid?

Question:

SITUATION #1: I have tables with different styles. When I go back to Table №1, Table №3, and Table №4 it takes styles from Table №2. How can I apply styles to Table №2 for this table only? Is there a style prefix for different tables?
The global style for Table №1, Table №3, and Table №4 are called grid-custom.css:

.ag-root {
  border-radius: 30px;
}

For Table №2 I have local styles called grid.css:

.ag-root {
  border-radius: 0;
}

return:

  return (
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
   )

====================================================
The first situation is done. When just one id is applied to the table it works.
SITUATION #2: I have global styles that apply to two tables. But after global styles, I need to apply a separate style for each table border-radius. In this case works just for #table1. Why? Same styles:

#table1 .ag-root {
  border-radius: 30px;
};

#table2 .ag-root {
  border-radius: 0;
};

Id for each table:

<div className="container-tables">
      <div id="table1">
        <TableOne
          rowData={rowDataOne}
          ...
        />
      </div>

      <div id="table2">
        <TableTwo
          rowData={rowDataTwo}
          ...
        />
      </div>
</div>

and same return for both:

return (
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
   )

Answer:

You have 2 CSS files. Assuming, global file as which is applied on App.js for all components, and local for specific component. If you specifically want to apply css to Table 2 only then you need to assign id to div like this :

<div id="table2">
    <AgGridReact
      ref={ref}
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={{ resizable: true }}
      rowHeight={60}
      headerHeight={50}
      onFirstDataRendered={onFirstDataRenderedSchoolTeam}
      onGridSizeChanged={() => onGridSizeChanged(ref)}
    />
</div>

Then inside CSS:

#table2 .ag-root {
    border-radius: 0;
    background-color: #357a38;
}

Now, above CSS will only apply to id with table2 not on other tables
UPDATE:
The CSS is only getting applied on one table and not on other table. I can’t figure it out why! But using 4th method: CSS Modules, I managed to get the result.
Create a file named like style.module.css. Inside the file write your CSS

.table1 {
    background-color: #0575e6 !important;
}


.table2 {
    background-color: #357a38 !important;
}

Then import this file in your component like this:

import styles from './style.module.css'  //make sure the path is correct

Then, add className to your div

<div className={styles.table1} id="table1">
   ...
</div>

Same with table2, and you can remove id from divs as they are of no use now.

<div className={styles.table2}>
   ...
</div>

If you have better answer, please add a comment about this, thank you!

Resolved: how to style different tables ag-grid?

Resolved: net::ERR_HTTP2_PROTOCOL_ERROR by http get request angular 15.2

Resolved: How do I stop the command from happening if the requirements for it to work aren’t sert Discord.js

Resolved: How to scroll bottom of div at launch?

Leave A Reply