mig-schema-table 4.4.22 → 4.4.23
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/README.md +91 -91
- package/dist/component/SchemaTable/index.d.ts +1 -1
- package/dist/{index-DaoQTYlv.js → index-CqvXpPHk.js} +12967 -13011
- package/dist/{index-DtG9fQzv.js → index-D13gDB8E.js} +7544 -9525
- package/dist/mig-schema-table.es.js +1 -1
- package/dist/mig-schema-table.umd.js +46 -46
- package/dist/style.css +1 -1
- package/package.json +80 -80
package/README.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# schema-table-component
|
|
2
|
-
|
|
3
|
-
This component will render fields dynamically based on openApi schema JSON. Styling can be done using Bootstrap 5 compatible classes
|
|
4
|
-
|
|
5
|
-
# Install
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
npm install mig-schema-table
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
#### Schema Example:
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
const userSchema = {
|
|
17
|
-
properties: {
|
|
18
|
-
id: {
|
|
19
|
-
type: "string",
|
|
20
|
-
readOnly: true,
|
|
21
|
-
},
|
|
22
|
-
name: {
|
|
23
|
-
type: "string",
|
|
24
|
-
minLength: 3,
|
|
25
|
-
},
|
|
26
|
-
dob: {
|
|
27
|
-
type: "string",
|
|
28
|
-
format: "date",
|
|
29
|
-
},
|
|
30
|
-
address: {
|
|
31
|
-
type: "string",
|
|
32
|
-
maxLength: 250,
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
required: ["name"],
|
|
36
|
-
};
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
```typescript jsx
|
|
40
|
-
import React from "react";
|
|
41
|
-
import { SchemaTable, IColumnConfig } from "mig-schema-table";
|
|
42
|
-
import "mig-schema-table/dist/index.css";
|
|
43
|
-
// Add this for default datepicker styling
|
|
44
|
-
import "react-datepicker/dist/react-datepicker.css";
|
|
45
|
-
// Optionally add bootstrap5 styles
|
|
46
|
-
|
|
47
|
-
const config: { [keyName: string]: IColumnConfig } = {
|
|
48
|
-
id: {
|
|
49
|
-
hidden: true,
|
|
50
|
-
},
|
|
51
|
-
dob: {
|
|
52
|
-
title: "Date of Birth",
|
|
53
|
-
},
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const Table = () => {
|
|
57
|
-
const [users, setUsers] = useState();
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<SchemaTableComponent
|
|
61
|
-
data={users || []}
|
|
62
|
-
schema={userSchema}
|
|
63
|
-
width={window.innerWidth}
|
|
64
|
-
height={window.innerHeight - 150}
|
|
65
|
-
config={config}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
};
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Component Props
|
|
72
|
-
|
|
73
|
-
| Prop | Type | Description |
|
|
74
|
-
| ------------ | ---------- | ----------------------------------------------------------------------- |
|
|
75
|
-
| schema | `object` | schemaObject to be rendered as a set of fields(example openapi schema). |
|
|
76
|
-
| config | `object` | custom UI config {[keyName: string]: IColumnConfig;}. |
|
|
77
|
-
| data | `array` | data props will be rendered from api |
|
|
78
|
-
| onRowClick | `function` | it will be navigate to detail of row data |
|
|
79
|
-
| width | `number` | this props will be calculated width of table |
|
|
80
|
-
| height | `number` | this props will be calculated height of table |
|
|
81
|
-
| tableTitle | `string` | custom title for table your own |
|
|
82
|
-
| isSearchable | `boolean` | if this props is `true` then the search filed will shown |
|
|
83
|
-
| isSortable | `boolean` | if this props is `true` then the table to be able to shorting the data |
|
|
84
|
-
|
|
85
|
-
## Config
|
|
86
|
-
|
|
87
|
-
#### you can import the type of config from the IFieldConfig.
|
|
88
|
-
|
|
89
|
-
```ts
|
|
90
|
-
const config: { [keyName: string]: IColumnConfig } = {};
|
|
91
|
-
```
|
|
1
|
+
# schema-table-component
|
|
2
|
+
|
|
3
|
+
This component will render fields dynamically based on openApi schema JSON. Styling can be done using Bootstrap 5 compatible classes
|
|
4
|
+
|
|
5
|
+
# Install
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install mig-schema-table
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
#### Schema Example:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
const userSchema = {
|
|
17
|
+
properties: {
|
|
18
|
+
id: {
|
|
19
|
+
type: "string",
|
|
20
|
+
readOnly: true,
|
|
21
|
+
},
|
|
22
|
+
name: {
|
|
23
|
+
type: "string",
|
|
24
|
+
minLength: 3,
|
|
25
|
+
},
|
|
26
|
+
dob: {
|
|
27
|
+
type: "string",
|
|
28
|
+
format: "date",
|
|
29
|
+
},
|
|
30
|
+
address: {
|
|
31
|
+
type: "string",
|
|
32
|
+
maxLength: 250,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
required: ["name"],
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```typescript jsx
|
|
40
|
+
import React from "react";
|
|
41
|
+
import { SchemaTable, IColumnConfig } from "mig-schema-table";
|
|
42
|
+
import "mig-schema-table/dist/index.css";
|
|
43
|
+
// Add this for default datepicker styling
|
|
44
|
+
import "react-datepicker/dist/react-datepicker.css";
|
|
45
|
+
// Optionally add bootstrap5 styles
|
|
46
|
+
|
|
47
|
+
const config: { [keyName: string]: IColumnConfig } = {
|
|
48
|
+
id: {
|
|
49
|
+
hidden: true,
|
|
50
|
+
},
|
|
51
|
+
dob: {
|
|
52
|
+
title: "Date of Birth",
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const Table = () => {
|
|
57
|
+
const [users, setUsers] = useState();
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<SchemaTableComponent
|
|
61
|
+
data={users || []}
|
|
62
|
+
schema={userSchema}
|
|
63
|
+
width={window.innerWidth}
|
|
64
|
+
height={window.innerHeight - 150}
|
|
65
|
+
config={config}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Component Props
|
|
72
|
+
|
|
73
|
+
| Prop | Type | Description |
|
|
74
|
+
| ------------ | ---------- | ----------------------------------------------------------------------- |
|
|
75
|
+
| schema | `object` | schemaObject to be rendered as a set of fields(example openapi schema). |
|
|
76
|
+
| config | `object` | custom UI config {[keyName: string]: IColumnConfig;}. |
|
|
77
|
+
| data | `array` | data props will be rendered from api |
|
|
78
|
+
| onRowClick | `function` | it will be navigate to detail of row data |
|
|
79
|
+
| width | `number` | this props will be calculated width of table |
|
|
80
|
+
| height | `number` | this props will be calculated height of table |
|
|
81
|
+
| tableTitle | `string` | custom title for table your own |
|
|
82
|
+
| isSearchable | `boolean` | if this props is `true` then the search filed will shown |
|
|
83
|
+
| isSortable | `boolean` | if this props is `true` then the table to be able to shorting the data |
|
|
84
|
+
|
|
85
|
+
## Config
|
|
86
|
+
|
|
87
|
+
#### you can import the type of config from the IFieldConfig.
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
const config: { [keyName: string]: IColumnConfig } = {};
|
|
91
|
+
```
|
|
@@ -79,6 +79,6 @@ export interface INumberColumnFilterValue {
|
|
|
79
79
|
[ENumberColumnFilterOperation.EQ]: number;
|
|
80
80
|
filterEmpty?: boolean;
|
|
81
81
|
}
|
|
82
|
-
declare const SchemaTable: <T
|
|
82
|
+
declare const SchemaTable: <T>({ Heading, checkedIndexes, config, CustomElement, customElementProps, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, enableRowCounter, getRowClassName, getRowSelected, infiniteLoaderRef, isColumnFilterable, isExportable, isResizable, isSearchable, isSortable, maxHeight, setCheckedIndexes, onRowClick, onRowDoubleClick, onSearchEnter, onTableDataStateChange, rowHeight, schema, searchPlaceholder, settingsStorageKey, style, translate, useFilterStateHash, width, variableSizeGridRef, loadMoreItems, itemCount, displayTimezone, autoRender, CustomSearchInput, }: ISchemaTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
83
83
|
declare const MemoizedSchemaTable: typeof SchemaTable;
|
|
84
84
|
export default MemoizedSchemaTable;
|