schummar-table 0.6.0 → 0.7.0

package/dist/types/components/row.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Id, InternalColumn } from '../types';
-export declare function calcClassNames<T>(classes: InternalColumn<any, any>['classes'] | undefined, item: T, index: number): (string | false | undefined)[];
+import { Id, MemoizedTableTheme } from '../types';
+export declare function calcClassNames<T>(classes: MemoizedTableTheme<any>['classes'] | undefined, item: T, index: number): (string | false | undefined)[];
 export declare const Row: React.MemoExoticComponent<(<T>({ itemId, rowIndex }: {
     itemId: Id;
     rowIndex: number;

package/dist/types/hooks/useFilter.d.ts

@@ -3,4 +3,5 @@ export declare function useFilter<T, V, F, S extends SerializableValue>(impl: Fi
     value: S | undefined;
     onChange: (value?: S | undefined) => void;
     close: () => void;
+    filterBy: (value: V, item: T) => F | F[];
 };

package/dist/types/hooks/useMemoMap.d.ts

@@ -0,0 +1,2 @@
+import { FunctionWithDeps } from '../types';
+export declare function useMemoMap(): <Fn extends (...args: any[]) => any>(key: string, fn: FunctionWithDeps<Fn>) => Fn;

package/dist/types/hooks/useTableMemo.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { FunctionWithDeps } from '../types';
+export declare function TableMemoContextProvider({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useTableMemo(): <Fn extends (...args: any[]) => any>(key: string, fn: FunctionWithDeps<Fn>) => Fn;

package/dist/types/hooks/useTheme.d.ts

@@ -1,2 +1,2 @@
-import { TableTheme } from '../types';
-export declare function useTheme<T>(): TableTheme<T>;
+import { MemoizedTableTheme } from '../types';
+export declare function useTheme<T, S>(selector: (theme: MemoizedTableTheme<T>) => S): S;

package/dist/types/misc/throttle.d.ts

@@ -1,4 +1,5 @@
 export declare function throttle<Args extends any[]>(fn: (...args: Args) => void, ms: number): {
     (...args: Args): void;
     flush(): void;
+    cancel(): void;
 };

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSInterpolation } from '@emotion/serialize';
-import React, { ComponentType, ReactNode, Ref } from 'react';
+import React, { ComponentType, DependencyList, ReactNode, Ref } from 'react';
 import { TableStateStorage } from './internalState/tableStateStorage';
 import { CsvExportOptions } from './misc/csvExport';
 export declare type Sort = {
@@ -11,6 +11,10 @@ export declare type Id = string | number;
 export declare type KeyOfType<T, S> = {
     [K in keyof T]: T[K] extends S ? K : never;
 }[keyof T];
+export declare type FunctionWithDeps<F extends (...args: any[]) => any> = F | [function: F, ...deps: DependencyList];
+export declare type MemoizedFunctions<T> = {
+    [K in keyof T]: Exclude<T[K], [function: (...args: any[]) => any, ...deps: DependencyList[]]>;
+};
 export interface TableTheme<T = unknown> {
     /** Define display texts. */
     text: {
@@ -23,13 +27,13 @@ export interface TableTheme<T = unknown> {
         thisWeek: ReactNode;
         reset: ReactNode;
         loading: ReactNode;
-        selected: (count: number) => ReactNode;
+        selected: FunctionWithDeps<(count: number) => ReactNode>;
     };
     /** Define styles. */
     classes?: {
         table?: string;
         headerCell?: string;
-        cell?: string | ((item: T, index: number) => string | undefined);
+        cell?: string | FunctionWithDeps<(item: T, index: number) => string | undefined>;
         evenCell?: string;
         oddCell?: string;
     };
@@ -102,19 +106,27 @@ export interface TableTheme<T = unknown> {
 export declare type PartialTableTheme<T = unknown> = {
     [K in keyof TableTheme<T>]?: TableTheme<T>[K] extends Record<string, any> ? Partial<TableTheme<T>[K]> : TableTheme<T>[K];
 };
+export declare type MemoizedTableTheme<T> = Omit<TableTheme, 'classes' | 'text'> & {
+    classes: MemoizedFunctions<TableTheme<T>['classes']>;
+    text: MemoizedFunctions<TableTheme<T>['text']>;
+};
 export interface TableProps<T> extends PartialTableTheme<T> {
     /** The data to be rendered. One item per row. */
     items?: T[];
     /** Unique id for each item/row. */
-    id: ((item: T) => Id) | KeyOfType<T, Id>;
+    id: FunctionWithDeps<(item: T) => Id> | KeyOfType<T, Id>;
     /** Create a nested structure by assigning parents to items. Child items are hidden until the parent is expanded. */
-    parentId?: ((item: T) => Id | undefined) | KeyOfType<T, Id | undefined>;
+    parentId?: FunctionWithDeps<(item: T) => Id | undefined> | KeyOfType<T, Id | undefined>;
     /** If true for an item, it means that children will be loaded asynchronously as soon as item is expanded. */
     hasDeferredChildren?: (item: T) => boolean;
     /** Column definitions. */
     columns: Column<T, any>[] | ((col: <V>(value: (item: T) => V, column: Omit<Column<T, V>, 'value'>) => Column<T, V>) => Column<T, any>[]);
+    /** Default props for all column. Will take effect if not overriden in column definition. */
+    defaultColumnProps?: Omit<Column<T, unknown>, 'id' | 'value'>;
+    /** Wrap each cell */
+    wrapCell?: FunctionWithDeps<(content: ReactNode, value: unknown, item: T, index: number) => ReactNode>;
     /** Display a cell at the start of each row. Useful for "go to details" button for example. */
-    rowAction?: ReactNode | ((item: T, index: number) => ReactNode);
+    rowAction?: ReactNode | FunctionWithDeps<(item: T, index: number) => ReactNode>;
     /** Default sort order. */
     defaultSort?: Sort[];
     /** If given, controls the sort order. */
@@ -155,8 +167,6 @@ export interface TableProps<T> extends PartialTableTheme<T> {
     hiddenColumns?: Set<Id>;
     /** Called when hidden columns change. */
     onHiddenColumnsChange?: (hiddenColumns: Set<Id>) => void;
-    /** Default width for columns. */
-    defaultWidth?: string;
     /** Whether to stretch the table component over the available space. If value is "left" or "right", align accordingly. */
     fullWidth?: boolean | 'left' | 'right';
     /** Whether the table header should be sticky.
@@ -205,7 +215,7 @@ export interface TableProps<T> extends PartialTableTheme<T> {
     debug?: (...output: any) => void;
     debugRender?: (...output: any) => void;
 }
-export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'enableExport'> & {
+export declare type InternalTableProps<T> = MemoizedFunctions<Omit<TableProps<T>, 'id' | 'parentId' | 'columns' | 'defaultColumnProps' | 'enableExport'> & {
     id: (item: T) => Id;
     parentId?: (item: T) => Id | undefined;
     columns: InternalColumn<T, unknown>[];
@@ -213,7 +223,7 @@ export declare type InternalTableProps<T> = Omit<TableProps<T>, 'id' | 'parentId
         copy?: CsvExportOptions;
         download?: CsvExportOptions;
     };
-};
+}>;
 export declare type TableItem<T = unknown> = T & {
     id: Id;
     parentId?: Id;
@@ -227,13 +237,13 @@ export declare type Column<T, V> = {
     /** Render table header for this column. */
     header?: ReactNode;
     /** Extract value for this column */
-    value: (item: T) => V;
+    value: FunctionWithDeps<(item: T) => V>;
     /** Render table cell. If not provided, a string representation of the value will be rendered. */
-    renderCell?: (value: V, item: T) => ReactNode;
+    renderCell?: FunctionWithDeps<(value: V, item: T) => ReactNode>;
     /** Serialize column value for exports. If not provided, a string representation of the value will be used. */
     exportCell?: (value: V, item: T) => string | number;
     /** Customize sort criteria. By default it will be the value itself in case it's a number or Date, or a string representation of the value otherwise. */
-    sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
+    sortBy?: FunctionWithDeps<(value: V, item: T) => unknown>[];
     /** Set filter component that will be displayed in the column header */
     filter?: ReactNode;
     /** Prevent hiding the column. */
@@ -244,12 +254,11 @@ export declare type Column<T, V> = {
     width?: string;
     /** Provide css class names to override columns styles. */
     classes?: TableTheme<T>['classes'];
-    /** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
-    dependencies?: any[];
 };
-export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'>, 'header' | 'renderCell' | 'exportCell' | 'sortBy'> & {
+export declare type InternalColumn<T, V> = MemoizedFunctions<Required<Omit<Column<T, V>, 'id' | 'sortBy'>, 'header' | 'renderCell' | 'exportCell' | 'sortBy'> & {
     id: Id;
-};
+    sortBy: ((value: V, item: T) => unknown)[];
+}>;
 declare type Required<T, S> = T & {
     [P in keyof T as P extends S ? P : never]-?: T[P];
 };
@@ -259,7 +268,7 @@ export declare type InternalTableState<T> = {
     selection: Set<Id>;
     expanded: Set<Id>;
     rowHeights: Map<Id, number>;
-    filters: Map<Id, FilterImplementation<T, any, any, any>>;
+    filters: Map<Id, MemoizedFunctions<FilterImplementation<T, any, any, any>>>;
     filterValues: Map<Id, any>;
     hiddenColumns: Set<Id>;
     columnWidths: Map<Id, string>;
@@ -274,7 +283,7 @@ export declare type InternalTableState<T> = {
 };
 export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
     /** Filter by? By default the column value will be used. If filterBy returns an array, an items will be active if at least one entry matches the active filter. */
-    filterBy?: (value: V, item: T) => F | F[];
+    filterBy?: FunctionWithDeps<(value: V, item: T) => F | F[]>;
     /** Preselected filter value. */
     defaultValue?: S;
     /** Controlled filter value. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "type": "module",
   "sideEffects": false,