add CSV export options

types/react-bootstrap-table-next/index.d.ts

@@ -135,6 +135,20 @@ export interface ColumnDescription<T extends object = any, E = any> {
     footerTitle?: boolean;
     footerEvents?: { onClick: (e: any, column: ColumnDescription<T, E>, columnIndex: number) => void };
     footerAlign?: CellAlignment | ((column: ColumnDescription<T, E>, colIndex: number) => CellAlignment);
+
+    /**
+     * CSV Column options only used with the toolkit provider
+     */
+    csvType?: String | Number;
+    csvFormatter?: ColumnFormatter<T, E>;
+    /**
+     * csvText defaults to column.text
+     */
+    csvText?: string;
+    /**
+     * Toggle column display in CSV export
+     */
+    csvExport?: boolean;
 }
 
 /**

types/react-bootstrap-table2-toolkit/index.d.ts

@@ -33,6 +33,20 @@ export interface TableSearchProps<T extends object = any> {
     customMatchFunc?: (props: SearchMatchProps<T>) => boolean;
 }
 
+export interface CSVProps {
+    fileName?: string;
+    separator?: string;
+    ignoreHeader?: boolean;
+    noAutoBOM?: boolean;
+    /**
+     * default is text/plain;charset=utf-8
+     */
+    blobType?: string;
+    exportAll?: boolean;
+    onlyExportSelection?: boolean;
+    onlyExportFiltered?: boolean;
+}
+
 export interface TableToolkitProps<T extends object = any> {
     bootstrap4?: boolean;
     search?: TableSearchProps<T> | boolean;
@@ -41,6 +55,7 @@ export interface TableToolkitProps<T extends object = any> {
     ref?: any;
     columns: Array<ColumnDescription<T>>;
     children: (props: ToolkitContextType) => JSX.Element;
+    exportCSV?: boolean | CSVProps;
 }
 
 export interface ToolkitContextType {

types/react-bootstrap-table2-toolkit/react-bootstrap-table2-toolkit-tests.tsx

@@ -79,7 +79,7 @@ const productColumns: Array<ColumnDescription<Product>> = [
 ];
 
 /**
- * Toolkit with custom search test test
+ * Toolkit with custom search test
  */
 
 const CustomSearch = (props: InjectedSearchProps) => {
@@ -102,3 +102,33 @@ render(
     </ToolkitProvider>,
     document.getElementById('app'),
 );
+
+/**
+ * Toolkit CSV export test
+ */
+
+render(
+    <ToolkitProvider
+        data={products}
+        keyField="id"
+        exportCSV={{
+            fileName: 'custom.csv',
+            separator: '|',
+            ignoreHeader: true,
+            noAutoBOM: false,
+            blobType: 'text/plain;charset=utf-8',
+            exportAll: true,
+            onlyExportSelection: true,
+            onlyExportFiltered: true,
+        }}
+        columns={productColumns}
+    >
+        {({ baseProps, searchProps }) => (
+            <>
+                <CustomSearch {...searchProps} />
+                <BootstrapTable {...baseProps} pagination={paginationFactory({ sizePerPage: 10, page: 1 })} />
+            </>
+        )}
+    </ToolkitProvider>,
+    document.getElementById('app'),
+);