@linzjs/step-ag-grid 13.3.2 → 13.5.0

package/README.md

@@ -65,6 +65,7 @@ import {
 // Only required for LINZ themes otherwise import the default theme from ag-grid
 import "@linzjs/step-ag-grid/dist/GridTheme.scss";
 import "@linzjs/step-ag-grid/dist/index.css";
+import { GridFilterDownloadCsvButton } from "./GridFilterDownloadCsvButton";
 
 const GridDemo = () => {
   interface ITestRow {
@@ -80,6 +81,7 @@ const GridDemo = () => {
         headerName: "Id",
         initialWidth: 65,
         maxWidth: 85,
+        export: false,
       }),
       GridCell({
         field: "name",
@@ -113,7 +115,7 @@ const GridDemo = () => {
         {
           multiEdit: true,
           editorParams: {
-            message: async ({ selectedRows }) => {
+            message: async ({selectedRows}) => {
               return `There are ${selectedRows.length} row(s) selected`;
             },
           },
@@ -136,25 +138,26 @@ const GridDemo = () => {
       <GridContextProvider>
         <GridWrapper>
           <GridFilters>
-            <GridFilterQuick quickFilterPlaceholder={"Search..."} />
+            <GridFilterQuick/>
             <GridFilterButtons<ITestRow>
-                    options={[
-                      {
-                        label: "All",
-                      },
-                      {
-                        label: "Developers",
-                        filter: (row) => row.position === "Developer",
-                      },
-                      {
-                        label: "Testers",
-                        filter: (row) => row.position === "Tester",
-                      },
-                    ]}
+              options={[
+                {
+                  label: "All",
+                },
+                {
+                  label: "Developers",
+                  filter: (row) => row.position === "Developer",
+                },
+                {
+                  label: "Testers",
+                  filter: (row) => row.position === "Tester",
+                },
+              ]}
             />
             <GridFilterColumnsToggle/>
+            <GridFilterDownloadCsvButton fileName={"exportFile"}/>
           </GridFilters>
-          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData} />
+          <Grid selectable={true} columnDefs={columnDefs} rowData={rowData}/>
         </GridWrapper>
       </GridContextProvider>
     </GridUpdatingContextProvider>
@@ -162,6 +165,14 @@ const GridDemo = () => {
 };
 ```
 
+## CSV Download
+CSV download relies on column valueFormatters vs ag-grid's default valueGetter implementation.
+If you use a customRenderer for a column be sure to include a valueFormatter.
+To disable this behaviour pass undefined to processCellCallback.
+```<GridFilterDownloadCsvButton processCellCallback={undefined}/>```
+
+To exclude a column from CSV download add ```export: false``` to the GridCell definition. 
+
 ## Writing tests
 
 The following testing calls can be imported from step-ag-grid:

package/dist/index.css

@@ -339,16 +339,29 @@
 
 .Grid-container-filters {
   width: 100%;
-  margin-bottom: 16px;
   flex: 0;
   display: flex;
   align-items: center;
   flex-direction: row;
-  grid-column-gap: 1em;
-  padding: 0.25rem 0;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #beb9b4;
+  border-top: 2px solid #eaeaea;
 }
 
-.Grid-quickFilterBox {
+.Grid-container-filters button {
+  margin-left: 0 !important;
+}
+
+.GridFilterQuick-container:not(:last-child), .GridFilter-container:not(:last-child) {
+  margin-right: 8px;
+}
+
+.GridFilterQuick-container {
+  flex: 1;
+}
+
+.GridFilterQuick-input {
   width: 100%;
   height: 40px;
   border: 0.06rem solid #beb9b4;

package/dist/src/components/gridFilter/GridFilterDownloadCsvButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
+export declare const GridFilterDownloadCsvButton: (csvExportParams: CsvExportParams) => JSX.Element;

package/dist/src/components/gridFilter/index.d.ts

@@ -3,4 +3,5 @@ export * from "./GridFilterColumnsToggle";
 export * from "./GridFilterButtons";
 export * from "./GridFilterQuick";
 export * from "./GridFilters";
+export * from "./GridFilterDownloadCsvButton";
 export * from "./useGridFilter";

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

@@ -25,6 +25,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
     valueFormatter?: string | ((params: RowValueFormatterParams<RowType>) => string);
     filterValueGetter?: string | ((params: RowValueGetterParams<RowType>) => string);
     editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
+    exportable?: boolean;
 }
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
     singleClickEdit?: boolean;

package/dist/src/contexts/GridContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
 export interface GridContextType<RowType extends GridBaseRow> {
@@ -38,6 +39,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     getColumns: () => ColDefT<RowType>[];
     invisibleColumnIds: string[];
     setInvisibleColumnIds: (colIds: string[]) => void;
+    downloadCsv: (csvExportParams?: CsvExportParams) => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;
 export declare const useGridContext: <RowType extends GridBaseRow>() => GridContextType<RowType>;

package/dist/src/contexts/GridContextProvider.d.ts

@@ -1,3 +1,4 @@
+import { ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ReactElement, ReactNode } from "react";
 import { GridBaseRow } from "../components";
 interface GridContextProps {
@@ -9,4 +10,10 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export declare const GridContextProvider: <RowType extends GridBaseRow>(props: GridContextProps) => ReactElement;
+/**
+ * Aggrid defaults to using getters and ignores formatters.
+ * step-ag-grid by default has a valueFormatter for every column that defaults to the getter if no valueFormatter
+ * This function uses valueFormatter by default
+ */
+export declare const downloadCsvUseValueFormattersProcessCellCallback: (params: ProcessCellForExportParams) => string;
 export {};

package/dist/src/contexts/GridContextProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/util.d.ts

@@ -5,3 +5,10 @@ export declare const findParentWithClass: (className: string, child: Node) => HT
 export declare const hasParentClass: (className: string, child: Node) => boolean;
 export declare const stringByteLengthIsInvalid: (str: string, maxBytes: number) => boolean;
 export declare const fnOrVar: (fn: any, param: any) => any;
+/**
+ * Trim filename and replaces troublesome characters.
+ *
+ * e.g. " LT 1235/543 &%//*$ " => "LT_1235-543_&%-$"
+ * e.g. " @filename here!!!" => "@filename_here!!!"
+ */
+export declare const sanitiseFileName: (filename: string) => string;

package/dist/src/utils/util.test.d.ts

@@ -0,0 +1 @@
+export {};