feat: add no matching msg (#448)

Co-authored-by: YLui <[email protected]>

src/components/Grid.tsx

@@ -53,6 +53,7 @@ export interface GridProps {
    */
   selectColumnPinned?: ColDef["pinned"];
   noRowsOverlayText?: string;
+  noRowsMatchingOverlayText?: string;
   animateRows?: boolean;
   rowHeight?: number;
   rowClassRules?: GridOptions["rowClassRules"];
@@ -716,6 +717,7 @@ export const Grid = ({
                 headerRowHeight={headerRowCount * rowHeight}
                 filteredRowCount={event.api.getDisplayedRowCount()}
                 noRowsOverlayText={params.noRowsOverlayText}
+                noRowsMatchingOverlayText={params.noRowsMatchingOverlayText}
               />
             );
           }}

src/components/GridNoRowsOverlay.tsx

@@ -24,12 +24,14 @@ export interface GridNoRowsOverlayProps {
   rowCount: number | undefined | null;
   filteredRowCount: number;
   noRowsOverlayText: string | undefined;
+  noRowsMatchingOverlayText: string | undefined;
   headerRowHeight: number;
 }
 
 export const GridNoRowsOverlay = (props: GridNoRowsOverlayProps) => {
   if (props.loading) return <GridLoadingOverlayComponent headerRowHeight={props.headerRowHeight} />;
   if (props.rowCount === 0) return <div>{props.noRowsOverlayText ?? "There are currently no rows"}</div>;
-  if (props.filteredRowCount === 0) return <div>All rows have been filtered</div>;
+  if (props.filteredRowCount === 0)
+    return <div>{props.noRowsMatchingOverlayText ?? "All rows have been filtered"}</div>;
   return <span />;
 };

src/styles/GridTheme.scss

@@ -288,7 +288,11 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     font-size: 14px;
   }
 
-  .ag-row .ag-cell[aria-colindex="1"] {
+  .ag-row .ag-cell:first-of-type {
     padding-left: 32px;
   }
+
+  .ag-row .ag-cell:last-of-type {
+    padding-right: 32px;
+  }
 }