feat(ag-grid): add filter functionality and override styling

src/components/AgGrid/AgGridColumnSearch.tsx

@@ -6,6 +6,7 @@ import { AgGridReact } from '@ag-grid-community/react';
 import 'ag-grid-community/styles/ag-grid.css';
 // Core CSS
 import 'ag-grid-community/styles/ag-theme-quartz.css';
+import './Override.scss';
 import React, { useCallback, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -32,13 +33,14 @@ const AgGridColumnSearch = () => {
 
   // Column Definitions: Defines & controls grid columns.
   const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
-    { field: 'make' },
-    { field: 'model' },
-    { field: 'price' },
+    { field: 'make', filter: true },
+    { field: 'model', filter: true },
+    { field: 'price', filter: true },
   ]);
 
   const defaultColDef: ColDef = {
     flex: 1,
+    filter: true,
   };
 
   const onGridReady = useCallback((params: GridReadyEvent) => {
@@ -49,7 +51,7 @@ const AgGridColumnSearch = () => {
 
   // Container: Defines the grid's theme & dimensions.
   return (
-    <div className={'ag-theme-quartz-dark'} style={{ width: '100%', height: '100%' }}>
+    <div className={'ag-theme-quartz'} style={{ width: '100%', height: '100%' }}>
       <AgGridReact
         rowData={rowData}
         columnDefs={colDefs}

src/components/AgGrid/Override.scss

@@ -0,0 +1,120 @@
+/* Light mode variables */
+:root,
+.tds-mode-light {
+  --tds-ag-grid-table-header-bg: #dbdfe6;
+  --tds-ag-grid-table-header-cell-bg-hover: #cdd1db;
+  --tds-ag-grid-table-bg: #f9fafb;
+  --tds-ag-grid-table-row-hover-bg-color: #e7e9ee;
+  --tds-ag-grid-table-row-border-color: #cdd1db;
+  --tds-ag-grid-table-row-color: #0d0f13;
+  --tds-ag-grid-table-filter-icon-invert: invert(0%);
+
+  /* Global variables */
+  --tds-ag-grid-table-cell-focus-border-color: #2b70d3;
+  --tds-ag-grid-table-bottom-border-focus: 2px solid
+    var(--tds-ag-grid-table-cell-focus-border-color);
+  --tds-ag-grid-table-header-cell-text-font: 'Scania Sans Semi Condensed', Arial, Helvetica,
+    sans-serif;
+  --tds-ag-grid-table-header-cell-text-size: 14px;
+  --tds-ag-grid-table-header-cell-text-weight: bold;
+  --tds-ag-grid-table-header-cell-text-ls: -0.01em;
+  --tds-ag-grid-table-cell-text-font: 'Scania Sans Condensed', Arial, Helvetica, sans-serif;
+  --tds-ag-grid-table-cell-text-size: 14px;
+  --tds-ag-grid-table-cell-text-ls: -0.01em;
+  --tds-ag-grid-table-border-radius-top: 4px 4px 0 0;
+}
+
+/* Dark mode variables */
+.tds-mode-dark {
+  --tds-ag-grid-table-header-bg: #37414f;
+  --tds-ag-grid-table-header-cell-bg-hover: #56657a;
+  --tds-ag-grid-table-bg: #1d2229;
+  --tds-ag-grid-table-row-hover-bg-color: #2b323d;
+  --tds-ag-grid-table-row-border-color: #56657a;
+  --tds-ag-grid-table-row-color: #f9fafb;
+  --tds-ag-grid-table-filter-icon-invert: invert(100%);
+}
+
+/* Applied variables */
+.ag-theme-quartz,
+.ag-theme-quartz-dark {
+  --ag-header-background-color: var(--tds-ag-grid-table-header-bg);
+  --ag-header-cell-hover-background-color: var(--tds-ag-grid-table-header-cell-bg-hover);
+  --ag-background-color: var(--tds-ag-grid-table-bg);
+  --ag-foreground-color: var(--tds-ag-grid-table-row-color);
+  --ag-row-hover-color: var(--tds-ag-grid-table-row-hover-bg-color);
+  --ag-row-border-color: var(--tds-ag-grid-table-row-border-color);
+}
+
+/* Overrides - NOTE: Should be put into separate file */
+.ag-menu {
+  background: var(--ag-header-background-color);
+}
+
+.ag-filter-filter .ag-input-wrapper::before {
+  filter: var(--tds-ag-grid-table-filter-icon-invert) !important;
+}
+
+.ag-root-wrapper,
+.ag-picker-field-wrapper,
+.ag-picker-expanded {
+  border-radius: var(--tds-ag-grid-table-border-radius-top);
+}
+
+.ag-header-cell {
+  font-family: var(--tds-ag-grid-table-header-cell-text-font);
+  font-size: var(--tds-ag-grid-table-header-cell-text-size);
+  font-weight: var(--tds-ag-grid-table-header-cell-text-weight);
+  letter-spacing: var(--tds-ag-grid-table-header-cell-text-ls);
+}
+
+.ag-cell-value,
+.ag-popup {
+  font-family: var(--tds-ag-grid-table-cell-text-font);
+  font-size: var(--tds-ag-grid-table-cell-text-size);
+  letter-spacing: var(--tds-ag-grid-table-cell-text-ls);
+}
+
+.ag-header-cell-resize::after {
+  content: none;
+}
+
+.ag-ltr .ag-cell {
+  border-right: none;
+}
+
+.ag-ltr .ag-cell-focus:not(.ag-cell-rage-selected):focus-within {
+  border-color: var(--tds-ag-grid-table-cell-focus-border-color) !important;
+}
+
+.ag-ltr .ag-cell-focus:not(.ag-cell-rage-selected):focus-within input[class^='ag-'][type]:focus {
+  border: none;
+  border-bottom: var(--tds-ag-grid-table-bottom-border-focus);
+}
+
+.ag-cell-inline-editing {
+  border: none;
+  border-radius: 0px;
+}
+
+.ag-ltr input[class^='ag-'][type] {
+  border-radius: 0px;
+  border: none;
+}
+
+.ag-filter-body input[class^='ag-'][type]:focus {
+  border-bottom: var(--tds-ag-grid-table-bottom-border-focus) !important;
+}
+
+input[class^='ag-'][type]:focus,
+.ag-picker-field-wrapper,
+.ag-picker-field-wrapper:focus-within {
+  border: none;
+  box-shadow: none;
+}
+
+.ag-picker-field-wrapper:focus-within {
+  border-bottom: var(--tds-ag-grid-table-bottom-border-focus);
+}
+
+/*# sourceMappingURL=main.css.map */