@hpcc-js/dgrid2 0.0.0 → 2.2.0
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/LICENSE +43 -0
- package/README.md +5 -5
- package/dist/index.es6.js +422 -311
- package/dist/index.es6.js.map +1 -1
- package/dist/index.js +421 -310
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +2 -0
- package/dist/index.min.js.map +1 -0
- package/package.json +63 -62
- package/src/__package__.ts +3 -3
- package/src/hooks.ts +12 -0
- package/src/index.ts +2 -2
- package/src/reactTable.tsx +161 -0
- package/src/table.css +9 -9
- package/src/table.md +57 -57
- package/src/table.ts +92 -0
- package/types/__package__.d.ts +3 -3
- package/types/__package__.d.ts.map +1 -1
- package/types/hooks.d.ts +3 -0
- package/types/hooks.d.ts.map +1 -0
- package/types/index.d.ts +2 -2
- package/types/reactTable.d.ts +12 -0
- package/types/reactTable.d.ts.map +1 -0
- package/types/table.d.ts +32 -19
- package/types/table.d.ts.map +1 -1
- package/types-3.4/__package__.d.ts +2 -2
- package/types-3.4/hooks.d.ts +6 -0
- package/types-3.4/reactTable.d.ts +12 -0
- package/types-3.4/table.d.ts +20 -7
- package/src/table.tsx +0 -165
- package/src/test.ts +0 -41
- package/types/test.d.ts +0 -6
- package/types/test.d.ts.map +0 -1
- package/types-3.4/test.d.ts +0 -6
package/package.json
CHANGED
|
@@ -1,62 +1,63 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@hpcc-js/dgrid2",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "hpcc-js - DGrid2",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.es6",
|
|
7
|
-
"unpkg": "dist/index.min.js",
|
|
8
|
-
"jsdelivr": "dist/index.min.js",
|
|
9
|
-
"types": "types/index.d.ts",
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
"<3.8": {
|
|
12
|
-
"*": [
|
|
13
|
-
"types-3.4/index.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
"files": [
|
|
18
|
-
"dist/*",
|
|
19
|
-
"types/*",
|
|
20
|
-
"types-3.4/*",
|
|
21
|
-
"src/*"
|
|
22
|
-
],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"clean": "rimraf lib* types dist *.tsbuildinfo",
|
|
25
|
-
"compile-es6": "tsc --module es6 --outDir ./lib-es6",
|
|
26
|
-
"compile-es6-watch": "npm run compile-es6 -- -w",
|
|
27
|
-
"compile-umd": "tsc --module umd --outDir ./lib-umd",
|
|
28
|
-
"compile-umd-watch": "npm run compile-umd -- -w",
|
|
29
|
-
"bundle": "rollup -c",
|
|
30
|
-
"bundle-watch": "npm run bundle -- -w",
|
|
31
|
-
"minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
|
|
32
|
-
"gen-legacy-types": "downlevel-dts ./types ./types-3.4",
|
|
33
|
-
"build": "npm run compile-es6 && npm run bundle",
|
|
34
|
-
"watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"@hpcc-js/
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"@
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"tslib": "2.3.1"
|
|
50
|
-
},
|
|
51
|
-
"repository": {
|
|
52
|
-
"type": "git",
|
|
53
|
-
"url": "git+https://github.com/hpcc-systems/Visualization.git"
|
|
54
|
-
},
|
|
55
|
-
"author": "Gordon Smith <gordonjsmith@gmail.com>",
|
|
56
|
-
"contributors": [],
|
|
57
|
-
"license": "Apache-2.0",
|
|
58
|
-
"bugs": {
|
|
59
|
-
"url": "https://github.com/hpcc-systems/Visualization/issues"
|
|
60
|
-
},
|
|
61
|
-
"homepage": "https://github.com/hpcc-systems/Visualization"
|
|
62
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@hpcc-js/dgrid2",
|
|
3
|
+
"version": "2.2.0",
|
|
4
|
+
"description": "hpcc-js - DGrid2",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.es6",
|
|
7
|
+
"unpkg": "dist/index.min.js",
|
|
8
|
+
"jsdelivr": "dist/index.min.js",
|
|
9
|
+
"types": "types/index.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
"<3.8": {
|
|
12
|
+
"*": [
|
|
13
|
+
"types-3.4/index.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist/*",
|
|
19
|
+
"types/*",
|
|
20
|
+
"types-3.4/*",
|
|
21
|
+
"src/*"
|
|
22
|
+
],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"clean": "rimraf lib* types dist *.tsbuildinfo",
|
|
25
|
+
"compile-es6": "tsc --module es6 --outDir ./lib-es6",
|
|
26
|
+
"compile-es6-watch": "npm run compile-es6 -- -w",
|
|
27
|
+
"compile-umd": "tsc --module umd --outDir ./lib-umd",
|
|
28
|
+
"compile-umd-watch": "npm run compile-umd -- -w",
|
|
29
|
+
"bundle": "rollup -c",
|
|
30
|
+
"bundle-watch": "npm run bundle -- -w",
|
|
31
|
+
"minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
|
|
32
|
+
"gen-legacy-types": "downlevel-dts ./types ./types-3.4",
|
|
33
|
+
"build": "npm run compile-es6 && npm run bundle",
|
|
34
|
+
"watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
|
|
35
|
+
"serve-vite": "vite --config ../../vite.config.js",
|
|
36
|
+
"stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
|
|
37
|
+
"lint": "eslint src/**/*.ts",
|
|
38
|
+
"docs": "typedoc --options tdoptions.json .",
|
|
39
|
+
"update": "npx npm-check-updates -u -t minor"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"@hpcc-js/common": "^2.69.0",
|
|
43
|
+
"@hpcc-js/util": "^2.47.1"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@hpcc-js/bundle": "^2.11.1",
|
|
47
|
+
"preact": "10.7.1",
|
|
48
|
+
"react-data-grid": "7.0.0-beta.12",
|
|
49
|
+
"tslib": "2.3.1"
|
|
50
|
+
},
|
|
51
|
+
"repository": {
|
|
52
|
+
"type": "git",
|
|
53
|
+
"url": "git+https://github.com/hpcc-systems/Visualization.git"
|
|
54
|
+
},
|
|
55
|
+
"author": "Gordon Smith <gordonjsmith@gmail.com>",
|
|
56
|
+
"contributors": [],
|
|
57
|
+
"license": "Apache-2.0",
|
|
58
|
+
"bugs": {
|
|
59
|
+
"url": "https://github.com/hpcc-systems/Visualization/issues"
|
|
60
|
+
},
|
|
61
|
+
"homepage": "https://github.com/hpcc-systems/Visualization",
|
|
62
|
+
"gitHead": "46e2dd7a9998fe771f9104ddc09b3b0992d0bdfe"
|
|
63
|
+
}
|
package/src/__package__.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export const PKG_NAME = "@hpcc-js/dgrid2";
|
|
2
|
-
export const PKG_VERSION = "
|
|
3
|
-
export const BUILD_VERSION = "2.
|
|
1
|
+
export const PKG_NAME = "@hpcc-js/dgrid2";
|
|
2
|
+
export const PKG_VERSION = "2.2.0";
|
|
3
|
+
export const BUILD_VERSION = "2.103.2";
|
package/src/hooks.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Widget } from "@hpcc-js/common";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
export function useData(widget: Widget): [string[], Array<string | number>[]] {
|
|
5
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6
|
+
const columns: string[] = React.useMemo(() => widget.columns(), [widget, widget.dataChecksum()]);
|
|
7
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8
|
+
const data: Array<string | number>[] = React.useMemo(() => widget.data(), [widget, widget.dataChecksum()]);
|
|
9
|
+
|
|
10
|
+
return [columns, data];
|
|
11
|
+
}
|
|
12
|
+
|
package/src/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./__package__";
|
|
2
|
-
export * from "./table";
|
|
1
|
+
export * from "./__package__";
|
|
2
|
+
export * from "./table";
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
|
|
3
|
+
import { format, timeFormat, timeParse } from "@hpcc-js/common";
|
|
4
|
+
import { useData } from "./hooks";
|
|
5
|
+
import type { Table } from "./table";
|
|
6
|
+
|
|
7
|
+
export type QuerySortItem = { attribute: string, descending: boolean };
|
|
8
|
+
function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
|
|
9
|
+
const key = attribute as keyof T;
|
|
10
|
+
return [...items].sort((a: T, b: T) => {
|
|
11
|
+
if (a[key] < b[key]) {
|
|
12
|
+
return descending ? 1 : -1;
|
|
13
|
+
} else if (a[key] > b[key]) {
|
|
14
|
+
return descending ? -1 : 1;
|
|
15
|
+
}
|
|
16
|
+
return 0;
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface EmptyRowsRendererProps {
|
|
21
|
+
message: string
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
|
|
25
|
+
message
|
|
26
|
+
}) => {
|
|
27
|
+
|
|
28
|
+
return <div style={{ textAlign: "center", gridColumn: "1/-1" }} >
|
|
29
|
+
{message}
|
|
30
|
+
<span>
|
|
31
|
+
--- * --- * ---
|
|
32
|
+
</span>
|
|
33
|
+
</div>;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
|
|
37
|
+
__hpcc_pattern?: ReturnType<typeof timeParse>;
|
|
38
|
+
__hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface ReactTableProps {
|
|
42
|
+
table: Table;
|
|
43
|
+
sort?: QuerySortItem,
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
|
|
47
|
+
table,
|
|
48
|
+
sort
|
|
49
|
+
}) => {
|
|
50
|
+
const [columns, data] = useData(table);
|
|
51
|
+
const multiSelect = table.multiSelect();
|
|
52
|
+
const columnTypes = table.columnTypes();
|
|
53
|
+
const columnPatterns = table.columnPatterns();
|
|
54
|
+
const columnFormats = table.columnFormats();
|
|
55
|
+
|
|
56
|
+
const [listColumns, setListColumns] = React.useState<ColumnEx<any[]>[]>([]);
|
|
57
|
+
const [sortColumn, setSortColumn] = React.useState<SortColumn>();
|
|
58
|
+
const [rows, setRows] = React.useState<any[]>([]);
|
|
59
|
+
const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(new Set());
|
|
60
|
+
|
|
61
|
+
// Columns ---
|
|
62
|
+
React.useEffect(() => {
|
|
63
|
+
setListColumns([
|
|
64
|
+
...multiSelect ? [SelectColumn] : [],
|
|
65
|
+
...columns.map((column): ColumnEx<any[]> => {
|
|
66
|
+
const type = columnTypes[column] ?? "string";
|
|
67
|
+
let formatter;
|
|
68
|
+
let __hpcc_pattern;
|
|
69
|
+
let __hpcc_format;
|
|
70
|
+
switch (type) {
|
|
71
|
+
case "time":
|
|
72
|
+
__hpcc_pattern = columnPatterns[column] !== undefined ? timeParse(columnPatterns[column]) : undefined;
|
|
73
|
+
__hpcc_format = columnFormats[column] !== undefined ? timeFormat(columnFormats[column]) : undefined;
|
|
74
|
+
break;
|
|
75
|
+
case "number":
|
|
76
|
+
formatter = (props) => {
|
|
77
|
+
return <div style={{ textAlign: "right" }}>{props.row[props.column.key]}</div>;
|
|
78
|
+
};
|
|
79
|
+
// eslint-disable-next-line no-fallthrough
|
|
80
|
+
default:
|
|
81
|
+
__hpcc_format = columnFormats[column] !== undefined ? format(columnFormats[column]) : undefined;
|
|
82
|
+
}
|
|
83
|
+
return {
|
|
84
|
+
key: column,
|
|
85
|
+
name: column,
|
|
86
|
+
resizable: true,
|
|
87
|
+
sortable: true,
|
|
88
|
+
minWidth: 80,
|
|
89
|
+
formatter,
|
|
90
|
+
__hpcc_pattern,
|
|
91
|
+
__hpcc_format
|
|
92
|
+
};
|
|
93
|
+
})
|
|
94
|
+
]);
|
|
95
|
+
}, [columnFormats, columnPatterns, columnTypes, columns, multiSelect]);
|
|
96
|
+
|
|
97
|
+
const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
|
|
98
|
+
const futureSortColumn = sortColumns.slice(-1)[0];
|
|
99
|
+
const sorted = futureSortColumn !== undefined;
|
|
100
|
+
const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
|
|
101
|
+
setSortColumn(futureSortColumn);
|
|
102
|
+
setRows(copyAndSort(rows, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
|
|
103
|
+
}, [rows]);
|
|
104
|
+
|
|
105
|
+
const rowKeyGetter = React.useCallback((row: any) => {
|
|
106
|
+
return row.key;
|
|
107
|
+
}, []);
|
|
108
|
+
|
|
109
|
+
const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
|
|
110
|
+
setSelectedRows(selectedRows);
|
|
111
|
+
}, []);
|
|
112
|
+
|
|
113
|
+
const onRowClick = React.useCallback((row, column) => {
|
|
114
|
+
table.onRowClickCallback(row, column.key);
|
|
115
|
+
}, [table]);
|
|
116
|
+
|
|
117
|
+
// Rows ---
|
|
118
|
+
React.useEffect(() => {
|
|
119
|
+
let items = data.map((row, index) => {
|
|
120
|
+
const retVal = {
|
|
121
|
+
key: index
|
|
122
|
+
};
|
|
123
|
+
listColumns.forEach((column, index) => {
|
|
124
|
+
let val = row[index] as string;
|
|
125
|
+
if (column.__hpcc_pattern && column.__hpcc_format) {
|
|
126
|
+
val = column.__hpcc_format(column.__hpcc_pattern(val));
|
|
127
|
+
} else if (column.__hpcc_pattern) {
|
|
128
|
+
val = column.__hpcc_pattern(val).toString();
|
|
129
|
+
} else if (column.__hpcc_format) {
|
|
130
|
+
val = column.__hpcc_format(val as any);
|
|
131
|
+
}
|
|
132
|
+
retVal[column.key] = val;
|
|
133
|
+
});
|
|
134
|
+
return retVal;
|
|
135
|
+
});
|
|
136
|
+
if (sort?.attribute) {
|
|
137
|
+
items = copyAndSort(items, sort.attribute, sort.descending);
|
|
138
|
+
}
|
|
139
|
+
setRows(items);
|
|
140
|
+
}, [listColumns, data, sort]);
|
|
141
|
+
|
|
142
|
+
return <DataGrid
|
|
143
|
+
columns={listColumns}
|
|
144
|
+
headerRowHeight={24}
|
|
145
|
+
rows={rows}
|
|
146
|
+
rowKeyGetter={rowKeyGetter}
|
|
147
|
+
rowHeight={20}
|
|
148
|
+
components={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> }}
|
|
149
|
+
className={table.darkMode() ? "rdg-dark" : "rdg-light"}
|
|
150
|
+
sortColumns={sortColumn ? [sortColumn] : []}
|
|
151
|
+
onSortColumnsChange={onSortColumnsChange}
|
|
152
|
+
selectedRows={selectedRows}
|
|
153
|
+
onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
|
|
154
|
+
onRowClick={multiSelect ? undefined : onRowClick}
|
|
155
|
+
aria-describedby={""}
|
|
156
|
+
aria-label={""}
|
|
157
|
+
aria-labelledby={""}
|
|
158
|
+
style={{ height: "100%" }}
|
|
159
|
+
/>;
|
|
160
|
+
};
|
|
161
|
+
|
package/src/table.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.dgrid2_Table .rdg {
|
|
2
|
-
font-family: monospace, 'Courier New', Courier;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.dgrid2_Table .rdg-checkbox-label .rdg-checkbox {
|
|
6
|
-
block-size: 16px;
|
|
7
|
-
inline-size: 16px;
|
|
8
|
-
border-width: 2px;
|
|
9
|
-
box-shadow: inset 0 0 0 3px var(--rdg-background-color);
|
|
1
|
+
.dgrid2_Table .rdg {
|
|
2
|
+
font-family: monospace, 'Courier New', Courier;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.dgrid2_Table .rdg-checkbox-label .rdg-checkbox {
|
|
6
|
+
block-size: 16px;
|
|
7
|
+
inline-size: 16px;
|
|
8
|
+
border-width: 2px;
|
|
9
|
+
box-shadow: inset 0 0 0 3px var(--rdg-background-color);
|
|
10
10
|
}
|
package/src/table.md
CHANGED
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
# Table
|
|
2
|
-
|
|
3
|
-
**Class**: `Table`
|
|
4
|
-
|
|
5
|
-
<ClientOnly>
|
|
6
|
-
<hpcc-vitepress style="width:100%;height:600px">
|
|
7
|
-
<div id="placeholder" style="height:400px">
|
|
8
|
-
</div>
|
|
9
|
-
<script type="module">
|
|
10
|
-
import { Table } from "@hpcc-js/dgrid2";
|
|
11
|
-
|
|
12
|
-
new Table()
|
|
13
|
-
.target("placeholder")
|
|
14
|
-
.columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
|
|
15
|
-
.data([
|
|
16
|
-
["A", -25, -23, -25, -22],
|
|
17
|
-
["B", -20, -21, -25, -21],
|
|
18
|
-
["C", -18, -20, -25, -19],
|
|
19
|
-
["D", -17, -17, -25, -18],
|
|
20
|
-
["E", -16, -15, -19, -18],
|
|
21
|
-
["F", -15, -14, -16, -16],
|
|
22
|
-
["G", -12, -10, -14, -15],
|
|
23
|
-
["H", -12, -8, -13, -15],
|
|
24
|
-
["I", -11, -6, -12, -12],
|
|
25
|
-
["J", -11, -6, -8, -12],
|
|
26
|
-
["K", -9, 0, -5, -10],
|
|
27
|
-
["L", -5, 1, -5, -9],
|
|
28
|
-
["M", -5, 2, -4, -8],
|
|
29
|
-
["N", -1, 4, -2, -7],
|
|
30
|
-
["O", 3, 7, 0, -5],
|
|
31
|
-
["P", 3, 8, 0, -3],
|
|
32
|
-
["Q", 4, 8, 7, 0],
|
|
33
|
-
["R", 6, 9, 11, 1],
|
|
34
|
-
["S", 9, 11, 11, 5],
|
|
35
|
-
["T", 10, 20, 12, 6],
|
|
36
|
-
["U", 12, 20, 16, 8],
|
|
37
|
-
["V", 12, 21, 18, 14],
|
|
38
|
-
["W", 14, 21, 18, 18],
|
|
39
|
-
["X", 15, 23, 21, 18],
|
|
40
|
-
["Y", 21, 23, 23, 21],
|
|
41
|
-
["Z", 23, 24, 24, 24]
|
|
42
|
-
])
|
|
43
|
-
.render()
|
|
44
|
-
;
|
|
45
|
-
</script>
|
|
46
|
-
</hpcc-vitepress>
|
|
47
|
-
</ClientOnly>
|
|
48
|
-
|
|
49
|
-
::: tip
|
|
50
|
-
See [Getting Started](../README) for details on how to include @hpcc-js/dgrid2 in your application
|
|
51
|
-
:::
|
|
52
|
-
|
|
53
|
-
## `Table`
|
|
54
|
-
|
|
55
|
-
## Events
|
|
56
|
-
|
|
57
|
-
## Credits
|
|
1
|
+
# Table
|
|
2
|
+
|
|
3
|
+
**Class**: `Table`
|
|
4
|
+
|
|
5
|
+
<ClientOnly>
|
|
6
|
+
<hpcc-vitepress preview_border="0px" style="width:100%;height:600px">
|
|
7
|
+
<div id="placeholder" style="height:400px">
|
|
8
|
+
</div>
|
|
9
|
+
<script type="module">
|
|
10
|
+
import { Table } from "@hpcc-js/dgrid2";
|
|
11
|
+
|
|
12
|
+
new Table()
|
|
13
|
+
.target("placeholder")
|
|
14
|
+
.columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
|
|
15
|
+
.data([
|
|
16
|
+
["A", -25, -23, -25, -22],
|
|
17
|
+
["B", -20, -21, -25, -21],
|
|
18
|
+
["C", -18, -20, -25, -19],
|
|
19
|
+
["D", -17, -17, -25, -18],
|
|
20
|
+
["E", -16, -15, -19, -18],
|
|
21
|
+
["F", -15, -14, -16, -16],
|
|
22
|
+
["G", -12, -10, -14, -15],
|
|
23
|
+
["H", -12, -8, -13, -15],
|
|
24
|
+
["I", -11, -6, -12, -12],
|
|
25
|
+
["J", -11, -6, -8, -12],
|
|
26
|
+
["K", -9, 0, -5, -10],
|
|
27
|
+
["L", -5, 1, -5, -9],
|
|
28
|
+
["M", -5, 2, -4, -8],
|
|
29
|
+
["N", -1, 4, -2, -7],
|
|
30
|
+
["O", 3, 7, 0, -5],
|
|
31
|
+
["P", 3, 8, 0, -3],
|
|
32
|
+
["Q", 4, 8, 7, 0],
|
|
33
|
+
["R", 6, 9, 11, 1],
|
|
34
|
+
["S", 9, 11, 11, 5],
|
|
35
|
+
["T", 10, 20, 12, 6],
|
|
36
|
+
["U", 12, 20, 16, 8],
|
|
37
|
+
["V", 12, 21, 18, 14],
|
|
38
|
+
["W", 14, 21, 18, 18],
|
|
39
|
+
["X", 15, 23, 21, 18],
|
|
40
|
+
["Y", 21, 23, 23, 21],
|
|
41
|
+
["Z", 23, 24, 24, 24]
|
|
42
|
+
])
|
|
43
|
+
.render()
|
|
44
|
+
;
|
|
45
|
+
</script>
|
|
46
|
+
</hpcc-vitepress>
|
|
47
|
+
</ClientOnly>
|
|
48
|
+
|
|
49
|
+
::: tip
|
|
50
|
+
See [Getting Started](../README) for details on how to include @hpcc-js/dgrid2 in your application
|
|
51
|
+
:::
|
|
52
|
+
|
|
53
|
+
## `Table`
|
|
54
|
+
|
|
55
|
+
## Events
|
|
56
|
+
|
|
57
|
+
## Credits
|
package/src/table.ts
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { HTMLWidget, publish } from "@hpcc-js/common";
|
|
3
|
+
import { render, unmountComponentAtNode } from "react-dom";
|
|
4
|
+
import { ReactTable } from "./reactTable";
|
|
5
|
+
|
|
6
|
+
import "../src/table.css";
|
|
7
|
+
|
|
8
|
+
export type ColumnType = "boolean" | "number" | "string" | "time";
|
|
9
|
+
|
|
10
|
+
export class Table extends HTMLWidget {
|
|
11
|
+
|
|
12
|
+
protected _div;
|
|
13
|
+
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@publish("...empty...", "string", "No Data Message")
|
|
19
|
+
noDataMessage: publish<this, string>;
|
|
20
|
+
@publish(false, "boolean", "Dark Mode")
|
|
21
|
+
darkMode: publish<this, boolean>;
|
|
22
|
+
@publish(false, "boolean", "Multiple Selection")
|
|
23
|
+
multiSelect: publish<this, boolean>;
|
|
24
|
+
@publish({}, "object", "Column Types (\"boolean\" | \"number\" | \"string\" | \"time\"")
|
|
25
|
+
columnTypes: publish<this, { [column: string]: ColumnType }>;
|
|
26
|
+
@publish({}, "object", "Column Patterns")
|
|
27
|
+
columnPatterns: publish<this, { [column: string]: string }>;
|
|
28
|
+
@publish({}, "object", "Column Formats")
|
|
29
|
+
columnFormats: publish<this, { [column: string]: string }>;
|
|
30
|
+
|
|
31
|
+
columnType(column: string): ColumnType;
|
|
32
|
+
columnType(column: string, type: ColumnType): this;
|
|
33
|
+
columnType(column: string, type?: ColumnType): ColumnType | this {
|
|
34
|
+
if (arguments.length === 1) return this.columnTypes()[column];
|
|
35
|
+
this.columnTypes({ ...this.columnTypes(), [column]: type });
|
|
36
|
+
return this;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
columnPattern(column: string): string;
|
|
40
|
+
columnPattern(column: string, pattern: string): this;
|
|
41
|
+
columnPattern(column: string, pattern?: string): string | this {
|
|
42
|
+
if (arguments.length === 1) return this.columnPatterns()[column];
|
|
43
|
+
this.columnPatterns({ ...this.columnPatterns(), [column]: pattern });
|
|
44
|
+
return this;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
columnFormat(column: string): string;
|
|
48
|
+
columnFormat(column: string, format: string): this;
|
|
49
|
+
columnFormat(column: string, format?: string): string | this {
|
|
50
|
+
if (arguments.length === 1) return this.columnFormats()[column];
|
|
51
|
+
this.columnFormats({ ...this.columnFormats(), [column]: format });
|
|
52
|
+
return this;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
private _prevRow;
|
|
56
|
+
private _prevColumn;
|
|
57
|
+
onRowClickCallback(row, column) {
|
|
58
|
+
if (this._prevRow && JSON.stringify(this._prevRow) !== JSON.stringify(row)) {
|
|
59
|
+
this.click(this._prevRow, this._prevColumn ?? "", false);
|
|
60
|
+
}
|
|
61
|
+
if (row) {
|
|
62
|
+
this.click(row, column, true);
|
|
63
|
+
}
|
|
64
|
+
this._prevRow = row;
|
|
65
|
+
this._prevColumn = column;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
enter(domNode, element) {
|
|
69
|
+
super.enter(domNode, element);
|
|
70
|
+
this._div = element
|
|
71
|
+
.append("div")
|
|
72
|
+
;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
update(domNode, element) {
|
|
76
|
+
super.update(domNode, element);
|
|
77
|
+
this._div.style("width", this.width() + "px");
|
|
78
|
+
this._div.style("height", this.height() + "px");
|
|
79
|
+
render(React.createElement(ReactTable, { table: this }), this._div.node());
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
exit(domNode, element) {
|
|
83
|
+
unmountComponentAtNode(this._div.node());
|
|
84
|
+
this._div.remove();
|
|
85
|
+
super.exit(domNode, element);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Events ---
|
|
89
|
+
click(row, col, sel) {
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
Table.prototype._class += " dgrid2_Table";
|
package/types/__package__.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const PKG_NAME = "@hpcc-js/dgrid2";
|
|
2
|
-
export declare const PKG_VERSION = "
|
|
3
|
-
export declare const BUILD_VERSION = "2.
|
|
1
|
+
export declare const PKG_NAME = "@hpcc-js/dgrid2";
|
|
2
|
+
export declare const PKG_VERSION = "2.2.0";
|
|
3
|
+
export declare const BUILD_VERSION = "2.103.2";
|
|
4
4
|
//# sourceMappingURL=__package__.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"__package__.d.ts","sourceRoot":"","sources":["../src/__package__.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oBAAoB,CAAC;AAC1C,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"__package__.d.ts","sourceRoot":"","sources":["../src/__package__.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oBAAoB,CAAC;AAC1C,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,aAAa,YAAY,CAAC"}
|
package/types/hooks.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGzC,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAO5E"}
|
package/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from "./__package__";
|
|
2
|
-
export * from "./table";
|
|
1
|
+
export * from "./__package__";
|
|
2
|
+
export * from "./table";
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { Table } from "./table";
|
|
3
|
+
export declare type QuerySortItem = {
|
|
4
|
+
attribute: string;
|
|
5
|
+
descending: boolean;
|
|
6
|
+
};
|
|
7
|
+
export interface ReactTableProps {
|
|
8
|
+
table: Table;
|
|
9
|
+
sort?: QuerySortItem;
|
|
10
|
+
}
|
|
11
|
+
export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
|
|
12
|
+
//# sourceMappingURL=reactTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reactTable.d.ts","sourceRoot":"","sources":["../src/reactTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,oBAAY,aAAa,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AAkCvE,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAkH/D,CAAC"}
|
package/types/table.d.ts
CHANGED
|
@@ -1,20 +1,33 @@
|
|
|
1
|
-
import { HTMLWidget, publish } from "@hpcc-js/common";
|
|
2
|
-
import "../src/table.css";
|
|
3
|
-
export declare type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import { HTMLWidget, publish } from "@hpcc-js/common";
|
|
2
|
+
import "../src/table.css";
|
|
3
|
+
export declare type ColumnType = "boolean" | "number" | "string" | "time";
|
|
4
|
+
export declare class Table extends HTMLWidget {
|
|
5
|
+
protected _div: any;
|
|
6
|
+
constructor();
|
|
7
|
+
noDataMessage: publish<this, string>;
|
|
8
|
+
darkMode: publish<this, boolean>;
|
|
9
|
+
multiSelect: publish<this, boolean>;
|
|
10
|
+
columnTypes: publish<this, {
|
|
11
|
+
[column: string]: ColumnType;
|
|
12
|
+
}>;
|
|
13
|
+
columnPatterns: publish<this, {
|
|
14
|
+
[column: string]: string;
|
|
15
|
+
}>;
|
|
16
|
+
columnFormats: publish<this, {
|
|
17
|
+
[column: string]: string;
|
|
18
|
+
}>;
|
|
19
|
+
columnType(column: string): ColumnType;
|
|
20
|
+
columnType(column: string, type: ColumnType): this;
|
|
21
|
+
columnPattern(column: string): string;
|
|
22
|
+
columnPattern(column: string, pattern: string): this;
|
|
23
|
+
columnFormat(column: string): string;
|
|
24
|
+
columnFormat(column: string, format: string): this;
|
|
25
|
+
private _prevRow;
|
|
26
|
+
private _prevColumn;
|
|
27
|
+
onRowClickCallback(row: any, column: any): void;
|
|
28
|
+
enter(domNode: any, element: any): void;
|
|
29
|
+
update(domNode: any, element: any): void;
|
|
30
|
+
exit(domNode: any, element: any): void;
|
|
31
|
+
click(row: any, col: any, sel: any): void;
|
|
32
|
+
}
|
|
20
33
|
//# sourceMappingURL=table.d.ts.map
|
package/types/table.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAItD,OAAO,kBAAkB,CAAC;AAE1B,oBAAY,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElE,qBAAa,KAAM,SAAQ,UAAU;IAEjC,SAAS,CAAC,IAAI,MAAC;;IAOf,aAAa,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAErC,QAAQ,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEjC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEpC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC,CAAC;IAE7D,cAAc,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAE5D,aAAa,EAAE,OAAO,CAAC,IAAI,EAAE;QAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU;IACtC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI;IAOlD,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IACrC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAOpD,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IACpC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAOlD,OAAO,CAAC,QAAQ,CAAC;IACjB,OAAO,CAAC,WAAW,CAAC;IACpB,kBAAkB,CAAC,GAAG,KAAA,EAAE,MAAM,KAAA;IAW9B,KAAK,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOtB,MAAM,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOvB,IAAI,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOrB,KAAK,CAAC,GAAG,KAAA,EAAE,GAAG,KAAA,EAAE,GAAG,KAAA;CAEtB"}
|