schummar-table 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +7 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +4 -3
- package/dist/es/index.js.map +1 -1
- package/dist/types/components/dateFilter.d.ts +3 -0
- package/dist/types/components/datePicker.d.ts +8 -0
- package/dist/types/components/selectFilter.d.ts +4 -0
- package/dist/types/components/textFilter.d.ts +4 -1
- package/dist/types/index.d.ts +3 -1
- package/dist/types/types.d.ts +25 -10
- package/package.json +1 -1
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
import { CommonFilterProps } from '../types';
|
|
3
3
|
import { DatePickerProps, DateRange } from './datePicker';
|
|
4
4
|
export declare function DateFilter<T, V>({ locale, firstDayOfWeek, singleSelect, filterBy, ...props }: {
|
|
5
|
+
/** Which locale to use to render the calendar. */
|
|
5
6
|
locale?: string;
|
|
7
|
+
/** Which day of the week should be in the first column. */
|
|
6
8
|
firstDayOfWeek?: DatePickerProps['firstDayOfWeek'];
|
|
9
|
+
/** If enabled, only single days can be selected. Ranges otherwise. */
|
|
7
10
|
singleSelect?: boolean;
|
|
8
11
|
} & CommonFilterProps<T, V, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
|
|
9
12
|
export declare const today: () => DateRange;
|
|
@@ -3,13 +3,21 @@ export declare type DateRange = {
|
|
|
3
3
|
max: Date;
|
|
4
4
|
};
|
|
5
5
|
export declare type DatePickerProps = {
|
|
6
|
+
/** Currently selected day or range of days. */
|
|
6
7
|
value: Date | DateRange | null;
|
|
8
|
+
/** Callback for when the day (range) changes. */
|
|
7
9
|
onChange: (value: Date | DateRange | null) => void;
|
|
10
|
+
/** If enabled, ranges can be selected. */
|
|
8
11
|
rangeSelect?: boolean;
|
|
12
|
+
/** Which locale to use to render the calendar. */
|
|
9
13
|
locale?: string;
|
|
14
|
+
/** Which day of the week should be in the first column. */
|
|
10
15
|
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
11
16
|
};
|
|
17
|
+
/** Rounds a date down to the start of the day. */
|
|
12
18
|
export declare const startOfDay: (d: Date) => Date;
|
|
19
|
+
/** Rounds a date up to the end of the day. */
|
|
13
20
|
export declare const endOfDay: (d: Date) => Date;
|
|
21
|
+
/** Returns whether two dates and/or date ranges intersect. Intersection is considered per day. */
|
|
14
22
|
export declare function dateIntersect(a: Date | null | DateRange, b: Date | null | DateRange): boolean;
|
|
15
23
|
export declare function DatePicker({ value, onChange, rangeSelect, locale, firstDayOfWeek }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { CommonFilterProps, SerializableValue } from '../types';
|
|
3
3
|
export declare function SelectFilter<T, V, F extends SerializableValue>({ options: providedOptions, stringValue, render, singleSelect, ...props }: {
|
|
4
|
+
/** Which options are provided to select. By default all unique item values are used. */
|
|
4
5
|
options?: F[];
|
|
6
|
+
/** String representation of a value. Used to filter options via the text field. */
|
|
5
7
|
stringValue?: (value: F) => string;
|
|
8
|
+
/** Render values. By default a string representation of the value is used. */
|
|
6
9
|
render?: (value: F) => ReactNode;
|
|
10
|
+
/** If enabled, only one option can be selected at a time. */
|
|
7
11
|
singleSelect?: boolean;
|
|
8
12
|
} & CommonFilterProps<T, V, F, Set<F>>): JSX.Element;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CommonFilterProps } from '../types';
|
|
3
3
|
export declare function TextFilter<T, V>({ compare, filterBy, ...props }: {
|
|
4
|
-
|
|
4
|
+
/** Custom comparison function. Should return true if an item value matches the current filter value.
|
|
5
|
+
* By default a fuzzy text comparison is used.
|
|
6
|
+
*/
|
|
7
|
+
compare?: (itemValue: string, filterValue: string) => boolean;
|
|
5
8
|
} & CommonFilterProps<T, V, string, string>): JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { AutoFocusTextField } from './components/autoFocusTextField';
|
|
2
2
|
export { DateFilter } from './components/dateFilter';
|
|
3
|
+
export { dateIntersect, DatePicker, endOfDay, startOfDay } from './components/datePicker';
|
|
4
|
+
export type { DatePickerProps, DateRange } from './components/datePicker';
|
|
3
5
|
export { SelectFilter } from './components/selectFilter';
|
|
4
6
|
export { ColumnContext, Table, TableContext, useColumnContext, useTableContext } from './components/table';
|
|
5
7
|
export { TextFilter } from './components/textFilter';
|
|
@@ -8,4 +10,4 @@ export { useTheme } from './hooks/useTheme';
|
|
|
8
10
|
export type { TableStateStorage } from './internalState/tableStateStorage';
|
|
9
11
|
export { termMatch, textMatch } from './misc/textMatch';
|
|
10
12
|
export { configureTableTheme, mergeThemes, TableThemeContext, TableThemeProvider } from './theme/tableTheme';
|
|
11
|
-
export type { Column, Id, InternalColumn, PartialTableTheme,
|
|
13
|
+
export type { Column, Id, InternalColumn, PartialTableTheme, Sort, SortDirection, TableProps } from './types';
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSInterpolation } from '@emotion/serialize';
|
|
2
|
-
import React, { ComponentType,
|
|
2
|
+
import React, { ComponentType, ReactNode, Ref } from 'react';
|
|
3
3
|
import { TableStateStorage } from './internalState/tableStateStorage';
|
|
4
4
|
import { CsvExportOptions } from './misc/csvExport';
|
|
5
5
|
export declare type Sort = {
|
|
@@ -220,16 +220,29 @@ export declare type TableItem<T = unknown> = T & {
|
|
|
220
220
|
children: TableItem<T>[];
|
|
221
221
|
};
|
|
222
222
|
export declare type Column<T, V> = {
|
|
223
|
+
/** Column id. If not provided, the index in the column array will be used.
|
|
224
|
+
* An explicit id is better however for controlling column related states, persitance etc.
|
|
225
|
+
*/
|
|
223
226
|
id?: string;
|
|
227
|
+
/** Render table header for this column. */
|
|
224
228
|
header?: ReactNode;
|
|
229
|
+
/** Extract value for this column */
|
|
225
230
|
value: (item: T) => V;
|
|
231
|
+
/** Render table cell. If not provided, a string representation of the value will be rendered. */
|
|
226
232
|
renderCell?: (value: V, item: T) => ReactNode;
|
|
233
|
+
/** Serialize column value for exports. If not provided, a string representation of the value will be used. */
|
|
227
234
|
exportCell?: (value: V, item: T) => string | number;
|
|
235
|
+
/** 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. */
|
|
228
236
|
sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
|
|
237
|
+
/** Set filter component that will be displayed in the column header */
|
|
229
238
|
filter?: ReactNode;
|
|
239
|
+
/** Prevent hiding the column. */
|
|
230
240
|
cannotHide?: boolean;
|
|
241
|
+
/** Specify a css width.
|
|
242
|
+
* @default 'max-content'
|
|
243
|
+
*/
|
|
231
244
|
width?: string;
|
|
232
|
-
|
|
245
|
+
/** Provide css class names to override columns styles. */
|
|
233
246
|
classes?: TableTheme<T>['classes'];
|
|
234
247
|
/** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
|
|
235
248
|
dependencies?: any[];
|
|
@@ -240,13 +253,6 @@ export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'>, 'h
|
|
|
240
253
|
declare type Required<T, S> = T & {
|
|
241
254
|
[P in keyof T as P extends S ? P : never]-?: T[P];
|
|
242
255
|
};
|
|
243
|
-
export declare type Rows<T, V> = [{
|
|
244
|
-
value: V;
|
|
245
|
-
item: T;
|
|
246
|
-
}, ...{
|
|
247
|
-
value: V;
|
|
248
|
-
item: T;
|
|
249
|
-
}[]];
|
|
250
256
|
export declare type InternalTableState<T> = {
|
|
251
257
|
props: InternalTableProps<T>;
|
|
252
258
|
theme: TableTheme<T>;
|
|
@@ -268,16 +274,25 @@ export declare type InternalTableState<T> = {
|
|
|
268
274
|
lastSelectedId?: Id;
|
|
269
275
|
};
|
|
270
276
|
export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
|
|
277
|
+
/** 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. */
|
|
271
278
|
filterBy?: (value: V, item: T) => F | F[];
|
|
279
|
+
/** Preselected filter value. */
|
|
272
280
|
defaultValue?: S;
|
|
281
|
+
/** Controlled filter value. */
|
|
273
282
|
value?: S;
|
|
283
|
+
/** Notifies on filter change. */
|
|
274
284
|
onChange?: (value?: S) => void;
|
|
275
|
-
|
|
285
|
+
/** Whether to persist filter value (given that filter persitance is enabled for the table).
|
|
286
|
+
* @default true
|
|
287
|
+
*/
|
|
276
288
|
persist?: boolean;
|
|
277
289
|
};
|
|
278
290
|
export declare type FilterImplementation<T, V, F, S extends SerializableValue> = CommonFilterProps<T, V, F, S> & {
|
|
291
|
+
/** Unique filter id. Used to persist filter values. */
|
|
279
292
|
id: string;
|
|
293
|
+
/** Whether the filter is active currently. */
|
|
280
294
|
isActive: (filterValue: S) => boolean;
|
|
295
|
+
/** When the filter is active, this function is used to filter the items to be displayed. */
|
|
281
296
|
test: (filterValue: S, value: F) => boolean;
|
|
282
297
|
};
|
|
283
298
|
export declare type SerializableValue = string | number | boolean | null | Date | SerializableArray | SerializableObject | SerializableSet | SerializableMap;
|