Got it, let's break this down step by step to get exactly the setup you want: matching the row styling from the AG Grid row styles demo, while adding cell separators like the cell styling demo.

Step 1: Keep Your Base Row Style Configuration First #

First, make sure your existing grid configuration matches the row style setup you're targeting. This usually includes:

• Using the same core AG Grid theme (most likely the default alpine theme, which is used in the row styles demo)
• Keeping any rowStyle or rowClassRules you already have for hover, selected, or conditional row styling. For example:

  const gridOptions = {
    // Your existing row-related config
    rowStyle: { cursor: "pointer" },
    rowClassRules: {
      "highlighted-row": (params) => params.data?.price > 50,
      "selected-row": (params) => params.node.isSelected(),
    },
    // ...other core config (columnDefs, rowData, etc.)
  };
  

  And the corresponding CSS for those custom row classes:

  .highlighted-row {
    background-color: #f7f7f7;
  }
  .selected-row {
    background-color: #eaf2ff;
  }
  

Step 2: Add Cell Separators (Borders) #

To get the cell-by-cell separators like the cell styling demo, you have two straightforward options:

Option 1: Inline Cell Style via Grid Configuration #

Add a global cellStyle to your gridOptions to apply borders to every cell. You can tweak the border color to match your theme:

const gridOptions = {
  // ...your existing config
  cellStyle: {
    borderRight: "1px solid #e0e0e0",
    borderBottom: "1px solid #e0e0e0",
  },
};

To clean up the edges (remove extra borders on the last column/row), add conditional cell classes:

const gridOptions = {
  // ...your existing config
  cellClassRules: {
    "no-right-border": (params) => params.column.isLastColumn(),
    "no-bottom-border": (params) => params.node.lastChild,
  },
};

Then add CSS to remove those borders:

.no-right-border {
  border-right: none !important;
}
.no-bottom-border {
  border-bottom: none !important;
}

Option 2: Global CSS (Simpler for Full Grid) #

If you want to apply cell borders across the entire grid without inline config, use CSS to target AG Grid's built-in cell classes:

/* Add borders to all cells */
.ag-cell {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
/* Match header border to cell borders */
.ag-header-cell {
  border-bottom: 1px solid #e0e0e0;
}
/* Remove right border from last column */
.ag-cell-last-column {
  border-right: none;
}
/* Remove bottom border from last row */
.ag-row-last .ag-cell {
  border-bottom: none;
}

Final Check #

Make sure you don't have any conflicting CSS or config that overrides these styles. Test the grid to confirm:

• Row styles (hover, selected, conditional) match your target
• Cell separators appear cleanly between every cell without extra edges

内容的提问来源于stack exchange，提问作者Terrance Jackson