fixed ts bug

Author: JoshBot-Debug

README.md

@@ -51,6 +51,10 @@ function MyListOfData() {
       { field: "phone", datatype: "phone" },
       { field: "is_active", datatype: "boolean"},
       { field: "bio", datatype: "paragraph" },
+      
+      // For custom fields that do not exist in "data", use @ts-ignore
+      // @ts-ignore
+      { field: "customField" },
     ],
   })
 

build/index.d.ts

@@ -15,13 +15,13 @@ declare namespace Datatable {
 
   type Filters = { [F in Datatype]?: React.ReactNode };
 
-  type Column<FieldNames extends string> = {
-    field: FieldNames;
+  type Column<Data extends Record<string, any>> = {
+    field: keyof Data;
     columnName: string;
     sortable: boolean;
     filterable: boolean;
     omit: boolean;
-    renderCell?: (value: any, column: Column<FieldNames>, row: Record<FieldNames, any>) => React.ReactNode;
+    renderCell?: (value: any, column: Column<Data>, row: Data) => React.ReactNode;
     setOptions?: string[];
     multiFilter?: boolean;
   } & ({
@@ -35,16 +35,16 @@ declare namespace Datatable {
     filterOperations?: UseOperationFilter.BooleanFilterOperations[];
   })
 
-  type RowOptionMenuProps = { row: Record<FieldNames, any>; rowIndex: number; }
+  type RowOptionMenuProps<Data extends Record<string, any> = Record<string, any>> = { row: Data; rowIndex: number; }
 
   type AppsPanelProps = { OmitColumns: React.ReactNode; }
 
-  type ColumnConfig<FieldNames> = PartialKeys<Column<FieldNames>, "datatype" | "sortable" | "columnName" | "omit" | "filterable">[];
+  type ColumnConfig<Data> = PartialKeys<Column<Data>, "datatype" | "sortable" | "columnName" | "omit" | "filterable">[];
 
-  interface Config<FieldNames> {
+  interface Config<Data extends Record<string, any>> {
 
-    data: Data[];
-    columns: Datatable.ColumnConfig<FieldNames>;
+    data?: Data[];
+    columns: Datatable.ColumnConfig<Data>;
 
     /**
      * The total number of records in the database. (before pagination is applied)
@@ -54,12 +54,12 @@ declare namespace Datatable {
     /**
      * If serverSide is true, you need to handle the filters here and update data.
      */
-    onFilter?: (filter: Filter<FieldNames>) => void;
+    onFilter?: (filter: Filter<Data>) => void;
 
-    initialSortOrder?: Filter<FieldNames>["sortOrder"];
-    initialPage?: Filter<FieldNames>["page"];
-    initialOperationFilter?: Filter<FieldNames>["operationFilter"];
-    initialSetFilter?: Filter<FieldNames>["setFilter"];
+    initialSortOrder?: Filter<Data>["sortOrder"];
+    initialPage?: Filter<Data>["page"];
+    initialOperationFilter?: Filter<Data>["operationFilter"];
+    initialSetFilter?: Filter<Data>["setFilter"];
 
     /**
      * Default is true
@@ -68,86 +68,86 @@ declare namespace Datatable {
   }
 
 
-  interface RichDatatableProps<Data extends Record<string, any>, FieldNames> {
+  interface RichDatatableProps<Data extends Record<string, any>> {
     data?: Data[];
     isFetching?: boolean;
-    columns: Datatable.ColumnConfig<FieldNames>;
-    setFilter: Datatable.UseSetFilter.HookReturn<FieldNames>;
+    columns: Datatable.ColumnConfig<Data>;
+    setFilter: Datatable.UseSetFilter.HookReturn<Data>;
     operationFilter: Datatable.UseOperationFilter.HookReturn<string>;
-    sortable: Datatable.UseSortable.HookReturn<FieldNames>;
+    sortable: Datatable.UseSortable.HookReturn<Data>;
     pagination: Datatable.UsePagination.HookReturn;
-    selectable: Datatable.UseSelectable.HookReturn<FieldNames>;
-    RowOptionMenu?: React.FC<RowOptionMenuProps>;
+    selectable: Datatable.UseSelectable.HookReturn<Data>;
+    RowOptionMenu?: React.FC<RowOptionMenuProps<Data>>;
     AppsPanel?: React.FC<AppsPanelProps>;
-    isSelectable?: (row: Record<FieldNames, any>) => boolean;
+    isSelectable?: (row: Data) => boolean;
     NoData?: React.ReactNode;
-    onRowClick?: (row: Record<FieldNames, any>, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onRowClick?: (row: Data, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     showOptionsOnRowClick?: boolean;
   }
 
-  interface Filter<FieldNames> {
-    sortOrder?: UseSortable.SortOrder<FieldNames>;
-    page?: UsePagination.Page;
-    operationFilter?: UseOperationFilter.OperationFilter<TextFilterOperations | RangeFilterOperations | BooleanFilterOperations>;
-    setFilter?: UseSetFilter.SetFilter<FieldNames>;
+  interface Filter<Data extends Record<string, any>> {
+    sortOrder: UseSortable.SortOrder<Data>;
+    page: UsePagination.Page;
+    operationFilter: UseOperationFilter.OperationFilter<Data, UseOperationFilter.TextFilterOperations | UseOperationFilter.RangeFilterOperations | UseOperationFilter.BooleanFilterOperations>;
+    setFilter: UseSetFilter.SetFilter<Data>;
   }
 
 
-  interface TableHeaderProps<FieldNames extends string> extends React.PropsWithChildren {
-    column: Column<FieldNames>;
-    onClick?: (column: Column<FieldNames>) => void;
+  interface TableHeaderProps<Data> extends React.PropsWithChildren {
+    column: Column<Data>;
+    onClick?: (column: Column<Data>) => void;
     className?: string;
   }
 
   type DatatableFilterProps<Operation> = { multiFilter?: boolean; setOptions?: string[]; datatype: string; field: string; filterOperations?: Operation[] };
 
-  interface DatatableProps<FieldNames extends string> {
-    columns: Datatable.Column<FieldNames>[];
-    data: Record<FieldNames, any>[];
+  interface DatatableProps<Data extends Record<string, any>> {
+    columns: Datatable.Column<Data>[];
+    data: Data[];
     isFetching?: boolean;
-    onColumnClick?: (column: Datatable.Column<FieldNames>) => void;
+    onColumnClick?: (column: Datatable.Column<Data>) => void;
 
-    RowOptionMenu?: React.FC<RowOptionMenuProps>
+    RowOptionMenu?: React.FC<RowOptionMenuProps<Data>>
     AppsPanel?: React.ReactNode;
 
-    renderFilter?: (column: Datatable.Column<FieldNames>, FilterMenu: React.FC<{ hasFilter: boolean; } & React.PropsWithChildren>) => React.ReactElement;
-    renderSort?: (column: Datatable.Column<FieldNames>) => React.ReactElement;
+    renderFilter?: (column: Datatable.Column<Data>, FilterMenu: React.FC<{ hasFilter: boolean; } & React.PropsWithChildren>) => React.ReactElement;
+    renderSort?: (column: Datatable.Column<Data>) => React.ReactElement;
     Footer?: React.ReactNode;
 
     hideSelect?: boolean;
     SelectHeader?: React.FC;
-    SelectCell?: React.FC<{ index: number; row: Record<FieldNames, any> }>;
+    SelectCell?: React.FC<{ index: number; row: Data }>;
     NoData?: React.ReactNode;
-    onRowClick?: (row: Record<FieldNames, any>, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onRowClick?: (row: Data, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     showOptionsOnRowClick?: boolean;
   }
 
 
 
   namespace UseSortable {
 
-    interface Config<FieldNames extends string> {
-      initialSortOrder?: SortOrder<FieldNames>;
-      onChange: (sortOrder: SortOrder<FieldNames>) => void;
+    interface Config<Data extends Record<string, any>> {
+      initialSortOrder?: SortOrder<Data>;
+      onChange: (sortOrder: SortOrder<Data>) => void;
     }
 
-    interface HookReturn<FieldNames extends string> {
-      sortOrder: SortOrder<FieldNames>;
-      Sort: (props: SortProps<FieldNames>) => JSX.Element | null;
-      onSort: (column: Column<FieldNames>) => void
+    interface HookReturn<Data extends Record<string, any>> {
+      sortOrder: SortOrder<Data>;
+      Sort: (props: SortProps<Data>) => JSX.Element | null;
+      onSort: (column: DatatableColumn<Data>) => void
     }
 
-    interface SortProps<FieldNames extends string> {
-      column: Column<FieldNames>;
+    interface SortProps<Data> {
+      column: Column<Data>;
       sortDirection?: SortDirection;
       orderIndex?: number;
       isMultiSort: boolean;
     }
 
     type SortDirection = "asc" | "desc"
 
-    type SortOrder<FieldNames extends string> = {
-      [K in FieldNames]?: {
+    type SortOrder<Data extends Record<string, any>> = {
+      [K in keyof Data]?: {
         sortDirection: SortDirection;
         orderIndex: number;
       }
@@ -203,14 +203,14 @@ declare namespace Datatable {
 
   namespace UseSelectable {
 
-    interface Config<FieldNames> {
+    interface Config {
       numberOfRows: number;
       onChange: (selectable: { isAllSelected: boolean; selectedRows: number[] }) => void;
     }
 
-    interface HookReturn<FieldNames> {
+    interface HookReturn {
       Header: (props: HeaderProps) => JSX.Element | null;
-      Row: (props: RowProps<FieldNames>) => JSX.Element | null;
+      Row: (props: RowProps) => JSX.Element | null;
       selectAll: (select: boolean) => void;
       selectedRows: number[];
       onSelectRow: (checked: boolean, rowIndex: number) => void;
@@ -223,7 +223,7 @@ declare namespace Datatable {
       isAllSelected: boolean;
     }
 
-    interface RowProps<FieldNames> {
+    interface RowProps {
       index: number;
       disabled: boolean;
       checked: boolean;
@@ -235,17 +235,17 @@ declare namespace Datatable {
 
   namespace UseSetFilter {
 
-    interface Config<FieldNames> {
-      onChange: (setFilter: SetFilter<FieldNames>) => void;
-      initialSetFilter?: SetFilter<FieldNames>;
+    interface Config<Data extends Record<string, any>> {
+      onChange: (setFilter: SetFilter<Data>) => void;
+      initialSetFilter?: SetFilter<Data>;
     }
 
-    type SetFilter<FieldNames> = { [F in FieldNames]?: string[] };
+    type SetFilter<Data extends Record<string, any>> = { [K in keyof Data]?: string[] };
 
-    interface HookReturn<FieldNames> {
+    interface HookReturn<Data extends Record<string, any>> {
       SetFilter: (props: SetFilterProps) => JSX.Element | null;
-      setFilter: SetFilter<FieldNames>;
-      onSetFilter: (filter: SetFilter<FieldNames>) => void;
+      setFilter: SetFilter<Data>;
+      onSetFilter: (filter: SetFilter<Data>) => void;
     }
 
 
@@ -272,14 +272,14 @@ declare namespace Datatable {
       or?: OperationValue<Operation>
     }
 
-    type OperationFilter<Operation> = {
-      [field: string]: OperationValue<Operation>
+    type OperationFilter<Data extends Record<string, any>, Operation> = {
+      [key: keyof Data]: OperationValue<Operation>
     };
 
-    interface HookReturn<Operation> {
-      OperationFilter: (props: OperationProps<Operation>) => JSX.Element | null;
-      operationFilter: OperationFilter<Operation>;
-      onSetOperationFilter: (filter: OperationFilter<Operation>) => void;
+    interface HookReturn<Data extends Record<string, any>, Operation> {
+      OperationFilter: (props: OperationProps<Data, Operation>) => JSX.Element | null;
+      operationFilter: OperationFilter<Data, Operation>;
+      onSetOperationFilter: (filter: OperationFilter<Data, Operation>) => void;
     }
 
     type BooleanFilterOperations = "Is true" | "Is false" | "Is blank";
@@ -288,10 +288,10 @@ declare namespace Datatable {
 
     type TextFilterOperations = "Equal" | "Not equal" | "Contains" | "Starts with" | "Ends with" | "Is blank";
 
-    interface OperationProps<Operation> {
+    interface OperationProps<Data extends Record<string, any>, Operation> {
       inputType?: "text" | "date" | "datetime-local" | "number";
-      field: string;
-      onChange: (result: UseOperationFilter.OperationFilter<Operation>) => void;
+      field: keyof Data;
+      onChange: (result: UseOperationFilter.OperationFilter<Data, Operation>) => void;
       filterOperations?: Operation[];
       currentValue?: UseOperationFilter.OperationValue<Operation>
       allowedOperations: Operation[];
@@ -300,31 +300,37 @@ declare namespace Datatable {
   }
 }
 
-declare function BaseDatatable<FieldNames extends string>(props: Datatable.DatatableProps<FieldNames>): react_jsx_runtime.JSX.Element;
+declare function BaseDatatable<Data extends Record<string, any>>(props: Datatable.DatatableProps<Data>): react_jsx_runtime.JSX.Element;
 
-declare function useDatatable<FieldNames>(config: Datatable.Config<FieldNames>): {
-    data: Record<string, any>[];
-    columns: Datatable.ColumnConfig<FieldNames>;
-    sortable: Datatable.UseSortable.HookReturn<string>;
+declare function useDatatable<Data extends Record<string, any>>(config: Datatable.Config<Data>): {
+    data: Data[];
+    columns: Datatable.ColumnConfig<Data>;
+    sortable: Datatable.UseSortable.HookReturn<Data>;
     pagination: Datatable.UsePagination.HookReturn;
-    selectable: Datatable.UseSelectable.HookReturn<string>;
-    setFilter: Datatable.UseSetFilter.HookReturn<FieldNames>;
-    operationFilter: Datatable.UseOperationFilter.HookReturn<string>;
-    updateFilter: react.Dispatch<react.SetStateAction<Datatable.Filter<FieldNames>>>;
+    selectable: Datatable.UseSelectable.HookReturn;
+    setFilter: Datatable.UseSetFilter.HookReturn<Data>;
+    operationFilter: Datatable.UseOperationFilter.HookReturn<Data, string>;
+    updateFilter: react.Dispatch<react.SetStateAction<Datatable.Filter<Data>>>;
     Datatable: typeof RichDatatable;
 };
-declare function RichDatatable<Data extends Record<string, any>, FieldNames extends string>(props: Datatable.RichDatatableProps<Data, FieldNames>): react_jsx_runtime.JSX.Element;
+declare function RichDatatable<Data extends Record<string, any>>(props: Datatable.RichDatatableProps<Data>): react_jsx_runtime.JSX.Element;
 
-interface Props<FieldNames extends string> {
-    columns: Datatable.Column<FieldNames>[];
-    setColumns: (callback: (columns: Datatable.Column<FieldNames>[]) => Datatable.Column<FieldNames>[]) => void;
+interface Props<Data extends Record<string, any>> {
+    columns: Datatable.Column<Data>[];
+    setColumns: (callback: (columns: Datatable.Column<Data>[]) => Datatable.Column<Data>[]) => void;
 }
-declare function OmitColumn<FieldNames extends string>(config: Props<FieldNames>): react_jsx_runtime.JSX.Element;
+declare function OmitColumn<Data extends Record<string, any>>(config: Props<Data>): react_jsx_runtime.JSX.Element;
 
 declare function usePagination(config: Datatable.UsePagination.Config): Datatable.UsePagination.HookReturn;
 
-declare function useSelectable<FieldNames extends string>(config: Datatable.UseSelectable.Config<FieldNames>): Datatable.UseSelectable.HookReturn<FieldNames>;
+declare function useSelectable(config: Datatable.UseSelectable.Config): Datatable.UseSelectable.HookReturn;
+
+declare function useSortable<Data extends Record<string, any>>(config: Datatable.UseSortable.Config<Data>): Datatable.UseSortable.HookReturn<Data>;
 
-declare function useSortable<FieldNames extends string>(config: Datatable.UseSortable.Config<FieldNames>): Datatable.UseSortable.HookReturn<FieldNames>;
+declare function useClientSide<Data extends Record<string, any>>(filter: Datatable.Filter<Data>, data?: Data[], count?: number, serverSide?: boolean): {
+    data: Data[];
+    count: number;
+    numberOfRows: number;
+};
 
-export { BaseDatatable, Datatable, OmitColumn, useDatatable, usePagination, useSelectable, useSortable };
+export { BaseDatatable, Datatable, OmitColumn, useClientSide, useDatatable, usePagination, useSelectable, useSortable };

build/index.esm.js

@@ -40,7 +40,8 @@
           user-select: none;
   position: sticky;
   top: 0;
-  padding: 0px;
+  padding-inline: 0px;
+  padding-block: 0px;
 }
 .myers-datatable .table-header:not(:first-child)::before {
   content: "";
@@ -60,7 +61,6 @@
 .myers-datatable .table-header-column-name {
   display: flex;
   margin-inline: 8px;
-  margin-block: 16px;
 }
 .myers-datatable .table-row {
   border: 1px solid rgb(240, 240, 240);
@@ -262,7 +262,6 @@
 .myers-datatable .filter-options-button {
   display: flex;
   margin-inline: 8px;
-  height: 40px;
 }
 .myers-datatable .operation-filter-container {
   min-width: 182px;

build/index.esm.js.map

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/datatable/static/css/main.8c51b9f8.css",
-    "main.js": "/datatable/static/js/main.d3e45a54.js",
+    "main.css": "/datatable/static/css/main.521c0ba4.css",
+    "main.js": "/datatable/static/js/main.44aa4454.js",
     "index.html": "/datatable/index.html",
-    "main.8c51b9f8.css.map": "/datatable/static/css/main.8c51b9f8.css.map",
-    "main.d3e45a54.js.map": "/datatable/static/js/main.d3e45a54.js.map"
+    "main.521c0ba4.css.map": "/datatable/static/css/main.521c0ba4.css.map",
+    "main.44aa4454.js.map": "/datatable/static/js/main.44aa4454.js.map"
   },
   "entrypoints": [
-    "static/css/main.8c51b9f8.css",
-    "static/js/main.d3e45a54.js"
+    "static/css/main.521c0ba4.css",
+    "static/js/main.44aa4454.js"
   ]
 }

build/index.js

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/datatable/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Discover @jjmyers/datatable, a powerful and customizable React library for creating interactive data tables with ease."><link rel="apple-touch-icon" href="/datatable/logo192.png"/><link rel="manifest" href="/datatable/manifest.json"/><title>@jjmyers/datatable - A Powerful React Library for Data Tables</title><script defer="defer" src="/datatable/static/js/main.d3e45a54.js"></script><link href="/datatable/static/css/main.8c51b9f8.css" rel="stylesheet"></head><body><style>#root,body,html{margin:0;height:100%}</style><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/datatable/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Discover @jjmyers/datatable, a powerful and customizable React library for creating interactive data tables with ease."><link rel="apple-touch-icon" href="/datatable/logo192.png"/><link rel="manifest" href="/datatable/manifest.json"/><title>@jjmyers/datatable - A Powerful React Library for Data Tables</title><script defer="defer" src="/datatable/static/js/main.44aa4454.js"></script><link href="/datatable/static/css/main.521c0ba4.css" rel="stylesheet"></head><body><style>#root,body,html{margin:0;height:100%}</style><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>