update

Author: neotrow

rollup.config.mjs

@@ -26,7 +26,7 @@ const plugins = [
   terser({
     output: { comments: false },
     compress: {
-      drop_console: true,
+      drop_console: false,
     },
   }),
 ];

src/index.ts

@@ -1,4 +1,3 @@
-export * from "./lib/ReactDataTable/ExtendedColumnDef";
 export * from "./lib/ReactDataTable/ReactDataTable";
 export * from "./lib/ReactDataTable/ReactDataTableProps";
 export * from "./lib/ReactDataTable/translations";

src/lib/ReactDataTable/ExtendedColumnDef.ts

@@ -7,7 +7,7 @@ import { ReactDataTableRenderer } from "./ReactDataTableRenderer";
 
 const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
   const {
-    data,
+    data = [],
     columns,
     onFilterChange,
     onSortingChange,

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -1,18 +1,18 @@
 import { CSSProperties } from "react";
-import { ColumnFiltersState, CoreOptions, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table";
-import { ExtendedColumnDef } from "./ExtendedColumnDef";
+import { ColumnDef, ColumnFiltersState, CoreOptions, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table";
 
 export interface ReactDataTableProps<TData> {
   /**
    * data to display in the table
    */
-  data: TData[];
+  data?: TData[];
 
   /**
    * columns to display in the table. You can use the createColumnHelper to create the columns
    * ref: https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers
    */
-  columns: ExtendedColumnDef<TData>[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<TData, any>[];
 
   /**
    * Called when the user changes the filters.

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Paging } from "@neolution-ch/react-pattern-ui";
 import { PaginationState, Table, flexRender } from "@tanstack/react-table";
 import { Spinner, Table as ReactStrapTable, Input } from "reactstrap";
-import { ExtendedColumnDef } from "./ExtendedColumnDef";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 
 interface ReactDataTableRendererProps<TData>
@@ -49,7 +48,11 @@ const ReactDataTableRenderer = <TData,>(props: ReactDataTableRendererProps<TData
               </tr>
               <tr key={`${headerGroup.id}-col-filters`}>
                 {headerGroup.headers.map((header) => {
-                  const extendedColumnDef = header.column.columnDef as ExtendedColumnDef<TData>;
+                  const {
+                    column: {
+                      columnDef: { meta },
+                    },
+                  } = header;
 
                   return (
                     <>
@@ -76,12 +79,18 @@ const ReactDataTableRenderer = <TData,>(props: ReactDataTableRendererProps<TData
 
                         {header.column.getCanFilter() && (
                           <>
-                            {extendedColumnDef.columnFilterDropDownConfig ? (
-                              <Input type="select" onChange={(e) => header.column.setFilterValue(e.target.value)} bsSize="sm">
+                            {meta?.dropdownFilter ? (
+                              <Input
+                                type="select"
+                                onChange={(e) => {
+                                  header.column.setFilterValue(e.target.value);
+                                }}
+                                bsSize="sm"
+                              >
                                 <option value="">All</option>
-                                {extendedColumnDef.columnFilterDropDownConfig.values.map((value) => (
-                                  <option key={value} value={value}>
-                                    {value}
+                                {meta.dropdownFilter.options.map(({ label, value }, i) => (
+                                  <option key={i} value={value}>
+                                    {label}
                                   </option>
                                 ))}
                               </Input>

src/lib/ReactDataTable/ReactDataTableRenderer.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import "@tanstack/react-table";
+import { RowData } from "@tanstack/react-table";
+
+interface DropdownColumnFilterOption {
+  label: string;
+  value: string | number;
+}
+
+interface DropdownColumnFilter {
+  options: DropdownColumnFilterOption[];
+}
+
+declare module "@tanstack/table-core" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    dropdownFilter?: DropdownColumnFilter;
+    parseValueAs?: "number" | "date";
+  }
+}