@syook/react-tabulous 4.6.0-beta.1 → 4.6.0-beta.3
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 +30 -23
- package/lib/index.d.ts +5 -1
- package/lib/index.esm.js +2 -2
- package/lib/index.js +1 -1
- package/lib/types/reactTabulous/models/columnDef/columnDef.d.ts +5 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Installation
|
|
4
4
|
|
|
5
|
-
To use in your own project, install it via [npm package](https://www.npmjs.com/package/react-tabulous).
|
|
5
|
+
To use in your own project, install it via [npm package](https://www.npmjs.com/package/@syook/react-tabulous).
|
|
6
6
|
|
|
7
7
|
`npm i @syook/react-tabulous`
|
|
8
8
|
|
|
@@ -14,22 +14,23 @@ Or you can clone.
|
|
|
14
14
|
|
|
15
15
|
### a. Available Column Options
|
|
16
16
|
|
|
17
|
-
| Option
|
|
18
|
-
|
|
|
19
|
-
| `headerName`
|
|
20
|
-
| `type`
|
|
21
|
-
| `field`
|
|
22
|
-
| `valueGetter`
|
|
23
|
-
| `renderCell`
|
|
24
|
-
| `description`
|
|
25
|
-
| `isSortable`
|
|
26
|
-
| `isSearchable`
|
|
27
|
-
| `isFilterable`
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
17
|
+
| Option | Description | Type | isRequired | Default |
|
|
18
|
+
| --------------- | -------------------------------------------------------------------------- | -------- | ---------- | ------- |
|
|
19
|
+
| `headerName` | Name of Column to be shown in header | String | true | |
|
|
20
|
+
| `type` | type of the field | String | true | |
|
|
21
|
+
| `field` | path to get value to be displayed | String | true | |
|
|
22
|
+
| `valueGetter` | should return string that to be displayed in the cell or used in filter | Function | false | null |
|
|
23
|
+
| `renderCell` | returns the element to be shown in the column cell | Function | false | null |
|
|
24
|
+
| `description` | shows the description of the column on hover in tooltip | String | false | '' |
|
|
25
|
+
| `isSortable` | is column sortable | Boolean | false | false |
|
|
26
|
+
| `isSearchable` | is column searchable | Boolean | false | false |
|
|
27
|
+
| `isFilterable` | is column filterable | Boolean | false | false |
|
|
28
|
+
| `isFormattable` | is column formattable | Boolean | false | false |
|
|
29
|
+
| `isVisible` | should hide/show the column or not | Boolean | false | true |
|
|
30
|
+
| `options` | array of options if the type is MultiSelect or Single Select | Array | false | [] |
|
|
31
|
+
| `isResizable` | is column resizable | Boolean | false | false |
|
|
32
|
+
| `pinned` | String='left' or 'right', where to fix the column | String | false | null |
|
|
33
|
+
| `width` | to fix column width to a value in pixels if width exceeding this threshold | Number | false | null |
|
|
33
34
|
|
|
34
35
|
### c. Available Types
|
|
35
36
|
|
|
@@ -129,7 +130,8 @@ const columns = [
|
|
|
129
130
|
type: 'number',
|
|
130
131
|
isFilterable: true,
|
|
131
132
|
isSortable: true,
|
|
132
|
-
isSearchable: true
|
|
133
|
+
isSearchable: true,
|
|
134
|
+
isFormattable: true
|
|
133
135
|
},
|
|
134
136
|
{
|
|
135
137
|
field: 'name',
|
|
@@ -137,7 +139,8 @@ const columns = [
|
|
|
137
139
|
type: 'string',
|
|
138
140
|
isFilterable: true,
|
|
139
141
|
isSortable: true,
|
|
140
|
-
isSearchable: true
|
|
142
|
+
isSearchable: true,
|
|
143
|
+
isFormattable: true
|
|
141
144
|
},
|
|
142
145
|
{
|
|
143
146
|
field: 'age',
|
|
@@ -145,7 +148,8 @@ const columns = [
|
|
|
145
148
|
type: 'number',
|
|
146
149
|
isFilterable: true,
|
|
147
150
|
isSortable: true,
|
|
148
|
-
isSearchable: true
|
|
151
|
+
isSearchable: true,
|
|
152
|
+
isFormattable: true
|
|
149
153
|
},
|
|
150
154
|
{
|
|
151
155
|
field: 'level',
|
|
@@ -159,7 +163,8 @@ const columns = [
|
|
|
159
163
|
},
|
|
160
164
|
isFilterable: true,
|
|
161
165
|
isSortable: true,
|
|
162
|
-
isSearchable: true
|
|
166
|
+
isSearchable: true,
|
|
167
|
+
isFormattable: true
|
|
163
168
|
},
|
|
164
169
|
{
|
|
165
170
|
field: 'birthDate',
|
|
@@ -167,7 +172,8 @@ const columns = [
|
|
|
167
172
|
type: 'date',
|
|
168
173
|
isFilterable: true,
|
|
169
174
|
isSortable: true,
|
|
170
|
-
isSearchable: true
|
|
175
|
+
isSearchable: true,
|
|
176
|
+
isFormattable: true
|
|
171
177
|
},
|
|
172
178
|
{
|
|
173
179
|
field: 'email',
|
|
@@ -175,7 +181,8 @@ const columns = [
|
|
|
175
181
|
type: 'string',
|
|
176
182
|
isFilterable: true,
|
|
177
183
|
// isSortable: true,
|
|
178
|
-
isSearchable: true
|
|
184
|
+
isSearchable: true,
|
|
185
|
+
isFormattable: true
|
|
179
186
|
},
|
|
180
187
|
{
|
|
181
188
|
field: 'workPlace',
|
package/lib/index.d.ts
CHANGED
|
@@ -125,9 +125,13 @@ interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel, V = an
|
|
|
125
125
|
*/
|
|
126
126
|
isSortable?: boolean;
|
|
127
127
|
/**
|
|
128
|
-
* The column to
|
|
128
|
+
* The column to filterable or not.
|
|
129
129
|
*/
|
|
130
130
|
isFilterable?: boolean;
|
|
131
|
+
/**
|
|
132
|
+
* The column to formatable cells or not.
|
|
133
|
+
*/
|
|
134
|
+
isFormattable?: boolean;
|
|
131
135
|
/**
|
|
132
136
|
* The column to show options in filter.
|
|
133
137
|
*/
|