@gpa-gemstone/react-table 1.2.1 → 1.2.6

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.
Files changed (4) hide show
  1. package/README.md +65 -65
  2. package/lib/SelectTable.js +10 -6
  3. package/lib/index.d.ts +2 -2
  4. package/package.json +13 -13
package/README.md CHANGED
@@ -1,65 +1,65 @@
1
- # react-table
2
-
3
- ![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)
4
-
5
- The Gemstone Web Library organizes all Gemstone functionality related to web.
6
-
7
- [![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)
8
-
9
- This library includes helpful npm package component for creating strongly typed tables in react.
10
-
11
- ## Usage Table
12
-
13
- ```ts
14
- interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
15
- let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
16
- let ascending: boolean = true;
17
-
18
- <Table<iType>
19
- cols={[
20
- { key: 'Field1', label: 'Field1' },
21
- { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
22
- { key: 'Field3', label: 'Field3' },
23
- { key: 'Field4', label: 'Field4' },
24
- { key: 'Field5', label: 'Field5' },
25
- ]}
26
- tableClass="table table-hover"
27
- theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
28
- tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
29
- rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
30
- sortField={''}
31
- onClick={() => { }}
32
- onSort={() => { }}
33
- data={records}
34
- ascending={ascending}
35
- />
36
-
37
- ```
38
-
39
- ## Usage SelectTable
40
-
41
- ```ts
42
- interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
43
- let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
44
- let ascending: boolean = true;
45
- let selectedItems: iType[] = [];
46
-
47
- <SelectTable<iType>
48
- cols={[
49
- { key: 'Field1', label: 'Field1' },
50
- { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
51
- { key: 'Field3', label: 'Field3' },
52
- { key: 'Field4', label: 'Field4' },
53
- { key: 'Field5', label: 'Field5' },
54
- ]}
55
- tableClass="table table-hover"
56
- theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
57
- tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
58
- rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
59
- KeyField={'Field1'}
60
- data={records}
61
- onSelection={(d) => {selectedItems = d}}
62
- />
63
-
64
- ```
65
-
1
+ # react-table
2
+
3
+ ![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)
4
+
5
+ The Gemstone Web Library organizes all Gemstone functionality related to web.
6
+
7
+ [![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)
8
+
9
+ This library includes helpful npm package component for creating strongly typed tables in react.
10
+
11
+ ## Usage Table
12
+
13
+ ```ts
14
+ interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
15
+ let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
16
+ let ascending: boolean = true;
17
+
18
+ <Table<iType>
19
+ cols={[
20
+ { key: 'Field1', label: 'Field1' },
21
+ { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
22
+ { key: 'Field3', label: 'Field3' },
23
+ { key: 'Field4', label: 'Field4' },
24
+ { key: 'Field5', label: 'Field5' },
25
+ ]}
26
+ tableClass="table table-hover"
27
+ theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
28
+ tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
29
+ rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
30
+ sortField={''}
31
+ onClick={() => { }}
32
+ onSort={() => { }}
33
+ data={records}
34
+ ascending={ascending}
35
+ />
36
+
37
+ ```
38
+
39
+ ## Usage SelectTable
40
+
41
+ ```ts
42
+ interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string}
43
+ let records:iType[] = [{Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021'}]
44
+ let ascending: boolean = true;
45
+ let selectedItems: iType[] = [];
46
+
47
+ <SelectTable<iType>
48
+ cols={[
49
+ { key: 'Field1', label: 'Field1' },
50
+ { key: 'Field2', label: 'Field2', content: (item, key, style) => item[key] },
51
+ { key: 'Field3', label: 'Field3' },
52
+ { key: 'Field4', label: 'Field4' },
53
+ { key: 'Field5', label: 'Field5' },
54
+ ]}
55
+ tableClass="table table-hover"
56
+ theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%', height: 50 }}
57
+ tbodyStyle={{ display: 'block', overflowY: 'scroll', width: '100%' }}
58
+ rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
59
+ KeyField={'Field1'}
60
+ data={records}
61
+ onSelection={(d) => {selectedItems = d}}
62
+ />
63
+
64
+ ```
65
+
package/lib/SelectTable.js CHANGED
@@ -32,10 +32,14 @@ var __assign = (this && this.__assign) || function () {
32
32
  };
33
33
  return __assign.apply(this, arguments);
34
34
  };
35
- var __spreadArray = (this && this.__spreadArray) || function (to, from) {
36
- for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
37
- to[j] = from[i];
38
- return to;
35
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
36
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
37
+ if (ar || !(i in from)) {
38
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
39
+ ar[i] = from[i];
40
+ }
41
+ }
42
+ return to.concat(ar || Array.prototype.slice.call(from));
39
43
  };
40
44
  Object.defineProperty(exports, "__esModule", { value: true });
41
45
  exports.SelectTable = void 0;
@@ -74,7 +78,7 @@ function SelectTable(props) {
74
78
  function handleClick(d, event) {
75
79
  var sIndex = selected.findIndex(function (item) { return item === d.row[props.KeyField]; });
76
80
  if (sIndex === -1)
77
- setSelected(function (od) { return __spreadArray(__spreadArray([], od), [d.row[props.KeyField]]); });
81
+ setSelected(function (od) { return __spreadArray(__spreadArray([], od, true), [d.row[props.KeyField]], false); });
78
82
  else
79
83
  setSelected(function (od) { return od.filter(function (item) { return item !== d.row[props.KeyField]; }); });
80
84
  }
@@ -99,7 +103,7 @@ function SelectTable(props) {
99
103
  React.createElement("i", { className: "fa fa-check-square-o fa-3x" }));
100
104
  return null;
101
105
  } }
102
- ], props.cols),
106
+ ], props.cols, true),
103
107
  data: data,
104
108
  onClick: handleClick,
105
109
  sortKey: sortKey,
package/lib/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import Table, { TableProps, Rows } from './Table';
1
+ import Table, { TableProps, Rows, Column } from './Table';
2
2
  import { SelectTable, ISelectTableProps } from './SelectTable';
3
3
  import { SearchableTable } from './SearchableTable';
4
4
  import { DynamicTableProps, DynamicTable } from './DynamicTable';
5
- export { TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows };
5
+ export { TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column };
6
6
  export default Table;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-table",
3
- "version": "1.2.1",
3
+ "version": "1.2.6",
4
4
  "description": "Table for GPA web applications",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -36,20 +36,20 @@
36
36
  },
37
37
  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
38
38
  "devDependencies": {
39
- "@types/jest": "^26.0.24",
40
- "jest": "27.0.6",
41
- "prettier": "2.3.2",
42
- "ts-jest": "27.0.3",
43
- "tslint": "6.1.3",
44
- "tslint-config-prettier": "1.18.0",
45
- "typescript": "4.3.4"
39
+ "@types/jest": "^26.0.4",
40
+ "jest": "^27.0.6",
41
+ "prettier": "^2.3.2",
42
+ "ts-jest": "^27.0.3",
43
+ "tslint": "^6.1.3",
44
+ "tslint-config-prettier": "^1.18.0",
45
+ "typescript": "4.4.4"
46
46
  },
47
47
  "dependencies": {
48
- "@gpa-gemstone/helper-functions": "0.0.7",
49
- "@types/lodash": "4.14.171",
50
- "@types/react": "17.0.14",
51
- "lodash": "4.17.21",
52
- "react": "17.0.2"
48
+ "@gpa-gemstone/helper-functions": "",
49
+ "@types/lodash": "^4.14.171",
50
+ "@types/react": "^17.0.14",
51
+ "lodash": "^4.17.21",
52
+ "react": "^17.0.2"
53
53
  },
54
54
  "publishConfig": {
55
55
  "access": "public"