drab 2.8.3 → 2.8.4
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.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
### DataTable
|
|
5
5
|
|
|
6
|
-
Data table to display an array of JS objects. Provides sorting and
|
|
6
|
+
Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
|
|
7
7
|
|
|
8
8
|
@props
|
|
9
9
|
|
|
@@ -27,7 +27,7 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
|
|
|
27
27
|
- `data` - a list of objects to render in the table
|
|
28
28
|
- `idTable` - `table` id
|
|
29
29
|
- `id`
|
|
30
|
-
- `keys` - table columns to include in the table, in order
|
|
30
|
+
- `keys` - table columns to include in the table, in order. Defaults to first item's keys
|
|
31
31
|
- `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
|
|
32
32
|
- `sortBy` - key (column) to sort by, defaults to first key
|
|
33
33
|
|
|
@@ -95,10 +95,7 @@ let className = "";
|
|
|
95
95
|
export { className as class };
|
|
96
96
|
export let id = "";
|
|
97
97
|
export let data;
|
|
98
|
-
export let keys = [];
|
|
99
|
-
if (!keys.length && data[0]) {
|
|
100
|
-
keys = Object.keys(data[0]);
|
|
101
|
-
}
|
|
98
|
+
export let keys = Object.keys(data[0]);
|
|
102
99
|
export let sortBy = keys[0];
|
|
103
100
|
export let ascending = true;
|
|
104
101
|
export let classTable = "";
|
|
@@ -143,14 +140,19 @@ const sort = (key, toggleAscending = true) => {
|
|
|
143
140
|
} else {
|
|
144
141
|
return collator.compare(bVal, aVal);
|
|
145
142
|
}
|
|
146
|
-
} else if (
|
|
143
|
+
} else if (aVal instanceof Date && bVal instanceof Date) {
|
|
144
|
+
if (ascending) {
|
|
145
|
+
return aVal.getTime() - bVal.getTime();
|
|
146
|
+
} else {
|
|
147
|
+
return bVal.getTime() - aVal.getTime();
|
|
148
|
+
}
|
|
149
|
+
} else {
|
|
147
150
|
if (ascending) {
|
|
148
151
|
return aVal === bVal ? 0 : aVal ? -1 : 1;
|
|
149
152
|
} else {
|
|
150
153
|
return aVal === bVal ? 0 : aVal ? 1 : -1;
|
|
151
154
|
}
|
|
152
|
-
}
|
|
153
|
-
return 0;
|
|
155
|
+
}
|
|
154
156
|
});
|
|
155
157
|
data = data;
|
|
156
158
|
sortBy = key;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
export type DataTableItem = Record<string | number, string | number | boolean>;
|
|
2
|
+
export type DataTableItem = Record<string | number, string | number | boolean | Date | undefined | null>;
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
class?: string | undefined;
|
|
6
6
|
id?: string | undefined;
|
|
7
7
|
/** a list of objects to render in the table */ data: DataTableItem[];
|
|
8
|
-
/** table columns to include in the table, in order */ keys?: string[] | undefined;
|
|
8
|
+
/** table columns to include in the table, in order. Defaults to first item's keys */ keys?: string[] | undefined;
|
|
9
9
|
/** key (column) to sort by, defaults to first key */ sortBy?: string | undefined;
|
|
10
10
|
/** current sort order */ ascending?: boolean | undefined;
|
|
11
11
|
/** `table` class */ classTable?: string | undefined;
|
|
@@ -38,7 +38,7 @@ declare const __propDef: {
|
|
|
38
38
|
item: DataTableItem;
|
|
39
39
|
key: string;
|
|
40
40
|
sortBy: string;
|
|
41
|
-
value: string | number | boolean;
|
|
41
|
+
value: string | number | boolean | Date | null | undefined;
|
|
42
42
|
};
|
|
43
43
|
pageNumber: {
|
|
44
44
|
currentPage: number;
|
|
@@ -54,7 +54,7 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
|
54
54
|
/**
|
|
55
55
|
* ### DataTable
|
|
56
56
|
*
|
|
57
|
-
* Data table to display an array of JS objects. Provides sorting and
|
|
57
|
+
* Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
|
|
58
58
|
*
|
|
59
59
|
* @props
|
|
60
60
|
*
|
|
@@ -78,7 +78,7 @@ export type DataTableSlots = typeof __propDef.slots;
|
|
|
78
78
|
* - `data` - a list of objects to render in the table
|
|
79
79
|
* - `idTable` - `table` id
|
|
80
80
|
* - `id`
|
|
81
|
-
* - `keys` - table columns to include in the table, in order
|
|
81
|
+
* - `keys` - table columns to include in the table, in order. Defaults to first item's keys
|
|
82
82
|
* - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
|
|
83
83
|
* - `sortBy` - key (column) to sort by, defaults to first key
|
|
84
84
|
*
|