ms-react-table 1.0.0 → 2.0.1
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 +310 -144
- package/dist/index.css +271 -25
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +47 -12
- package/dist/index.d.ts +47 -12
- package/dist/index.js +864 -144
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +851 -127
- package/dist/index.mjs.map +1 -1
- package/package.json +47 -43
package/README.md
CHANGED
|
@@ -1,25 +1,49 @@
|
|
|
1
|
-
#
|
|
1
|
+
# <center>MS React Table</center>
|
|
2
|
+
<center>This package is built to simplify complex table requirements in enterprise-grade apps.
|
|
3
|
+
It emphasizes **scalability, reusability, and developer experience**, making it ideal for projects that demand robust data grids without heavy dependencies.</center>
|
|
2
4
|
|
|
3
|
-
This file serves as the entry point for the MsReactTable library. It manages exports, imports styles, and makes the main table component and its types available for external use.
|
|
4
5
|
|
|
5
|
-
##
|
|
6
|
+
## `Table of Contents`
|
|
6
7
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
8
|
+
- [Overview](#overview)
|
|
9
|
+
- [Installation](#installation)
|
|
10
|
+
- [Example](#example)
|
|
11
|
+
- [Basic Setup](#basic-setup)
|
|
12
|
+
- [Client Side Rendering](#client-side-rendering)
|
|
13
|
+
- [Row Selection](#row-selection)
|
|
14
|
+
- [Filter](#filter)
|
|
15
|
+
- [Column Setup](#column-setup)
|
|
16
|
+
- [Server Side Rendering](#server-side-rendering)
|
|
17
|
+
- [License](#license)
|
|
10
18
|
|
|
11
|
-
### Key Features
|
|
12
19
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-
|
|
20
|
+
## Overview
|
|
21
|
+
|
|
22
|
+
Ms-react-table is a lightweight, customizable React table component designed for modern enterprise applications.
|
|
23
|
+
|
|
24
|
+
### Features
|
|
25
|
+
|
|
26
|
+
- Easy integration with React and TypeScript projects
|
|
27
|
+
- Configurable columns with flexible rendering
|
|
28
|
+
- Built-in sorting and filtering logic
|
|
29
|
+
- Resizable and visibility management
|
|
30
|
+
- Optimized for performance with large datasets
|
|
31
|
+
- Styled to blend seamlessly with default framework aesthetics
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
You can install **ms-react-table** via npm:
|
|
16
36
|
|
|
17
|
-
|
|
37
|
+
```bash
|
|
38
|
+
$ npm install ms-react-table
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Once the package is installed, you can import the library using import or require approach:
|
|
18
42
|
|
|
19
|
-
```
|
|
20
|
-
import '
|
|
21
|
-
|
|
22
|
-
|
|
43
|
+
```jsx
|
|
44
|
+
import MsReactTable from 'ms-react-table';
|
|
45
|
+
import 'ms-react-table/dist/index.css';
|
|
46
|
+
import type { MsTablePropsTypes, MsTableHeaderCellTypes, rowSelectionConfig } from 'ms-react-table';
|
|
23
47
|
```
|
|
24
48
|
|
|
25
49
|
#### Exports Explained
|
|
@@ -29,175 +53,317 @@ export type { MsTablePropsTypes, MsTableHeaderCellTypes } from './types/msTableT
|
|
|
29
53
|
| MsReactTable | Component | The primary table UI component for React applications. |
|
|
30
54
|
| MsTablePropsTypes | Type | Table props TypeScript type for prop validation. |
|
|
31
55
|
| MsTableHeaderCellTypes | Type | Header cell definition type for table columns. |
|
|
56
|
+
| rowSelectionConfig | Type | Row Selection Configuration. |
|
|
32
57
|
|
|
33
|
-
|
|
58
|
+
`MsReactTable` assembles the table's structure, context, and layout, and enables pagination.
|
|
34
59
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
This file defines the main `MsReactTable` React component. It assembles the table's structure, context, and layout, and enables pagination.
|
|
38
|
-
|
|
39
|
-
## Overview
|
|
60
|
+
## Example
|
|
40
61
|
|
|
41
|
-
|
|
42
|
-
- **Props Type**: `MsTablePropsTypes`
|
|
43
|
-
- **Context**: Uses `TableProvider` for state management and sharing refs.
|
|
44
|
-
- **Composition**: Renders header, body, and (optionally) footer with pagination.
|
|
45
|
-
- **Styling**: Applies a container and table-specific styles.
|
|
62
|
+
## Basic Setup
|
|
46
63
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
64
|
+
```jsx
|
|
65
|
+
import React from 'react';
|
|
66
|
+
import MsReactTable from 'ms-react-table';
|
|
67
|
+
import 'ms-react-table/dist/index.css';
|
|
68
|
+
|
|
69
|
+
const UserList = () =>{
|
|
70
|
+
const columns=[
|
|
71
|
+
{
|
|
72
|
+
title: 'Name',
|
|
73
|
+
dataIndex: 'name',
|
|
74
|
+
width: 100
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
title: 'Age',
|
|
78
|
+
dataIndex: 'age',
|
|
79
|
+
width: 100
|
|
80
|
+
},
|
|
81
|
+
...
|
|
82
|
+
]
|
|
83
|
+
|
|
84
|
+
const users = [
|
|
85
|
+
{
|
|
86
|
+
name: 'Abhijit Verma',
|
|
87
|
+
age: 30,
|
|
88
|
+
...
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
return (
|
|
92
|
+
<>
|
|
93
|
+
<MsReactTable
|
|
94
|
+
columns={columns}
|
|
95
|
+
data={users}
|
|
96
|
+
/>
|
|
97
|
+
</>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
```
|
|
63
101
|
|
|
64
|
-
###
|
|
102
|
+
### `Props List and description` :
|
|
103
|
+
|
|
104
|
+
| Prop | Type | Description | Default |
|
|
105
|
+
|-----------------------------|----------------------------------------------------------------------|------------------------------------------------------------------|-----------------|
|
|
106
|
+
| **columns** | `MsTableHeaderCellTypes[]` | Defines table column headers and configuration. | - |
|
|
107
|
+
| **data** | `any[]` | Array of row data to render in the table. | - |
|
|
108
|
+
| **isLoading** | `true \| false` | Shows loading state (e.g., spinner) when data is being fetched. | false |
|
|
109
|
+
| **height** | `string` | Sets fixed height for the table container. | 200px |
|
|
110
|
+
| **isClientSideRendering** | `boolean` | Enables client-side rendering of data (vs. server-side). | true |
|
|
111
|
+
| **showPagination** | `boolean` | Toggles pagination controls visibility. | true |
|
|
112
|
+
| **pageSizeOptions** | `number[]` | List of selectable page sizes for pagination. | [20,50,100] |
|
|
113
|
+
| **defaultPageSize** | `number` | Default number of rows per page. | 50 |
|
|
114
|
+
| **className** | `string` | Custom CSS class for the table wrapper. | - |
|
|
115
|
+
| **headerClassName** | `string` | Custom CSS class for the table header. | - |
|
|
116
|
+
| **style** | `React.CSSProperties` | Inline styles for the table container. | - |
|
|
117
|
+
| **ref** | `React.RefObject<GridFunctions>` | Ref exposing table functions (e.g., imperative methods). | - |
|
|
118
|
+
| **customComponentForNoRecords** | `React.ReactNode` | Custom component to show when no records are available. | - |
|
|
119
|
+
| **customComponentForFooter** | `React.ReactNode` | Custom component to render in the table footer left section. | - |
|
|
120
|
+
| **hideDefaultFilterButton** | `true \| false` | Hides the default filter button in the header. | false |
|
|
121
|
+
| **rowSelectConfig** | `rowSelectionConfig` | Configuration for row selection (checkboxes, rules). | - |
|
|
122
|
+
| **onPageChange** | `(currentPage: number, pageSize: number) => void` | Callback when pagination changes. | - |
|
|
123
|
+
| **onSortChange** | `(dataIndex: string, sortKey: 'asc' \| 'desc' \| null) => void` | Callback when sorting changes on a column. | - |
|
|
124
|
+
| **onFilterChange** | `(dataIndex: string, filterValue: any) => void` | Callback when a filter value changes. | - |
|
|
125
|
+
| **onRowSelect** | `(rowData: any) => void` | Callback when a row is selected. | - |
|
|
126
|
+
| **setRowData** | `(pageNo: number, pageSize: number, filters: filterValuesType, sortBy: { key: string, sortBy: sortDirection }) => void` | Function to update table data (usually for server-side fetch). | - |
|
|
127
|
+
#### Note : User RefObject to get access ms-react-table functions.
|
|
128
|
+
|
|
129
|
+
## `Client Side Rendering`
|
|
65
130
|
|
|
66
131
|
```jsx
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
132
|
+
const ClientSideRender = () => {
|
|
133
|
+
const gridRef = useRef<GridFunctions>(null!)
|
|
134
|
+
const columns: MsTableHeaderCellTypes[] = [
|
|
135
|
+
{ title: 'Name', dataIndex: 'name', width: 100 },
|
|
136
|
+
{ title: 'Status', dataIndex: 'active', type: 'boolean', width: 100 },
|
|
137
|
+
{ title: 'Age', dataIndex: 'age', width: 100, resizable: false, type: 'number', },
|
|
138
|
+
{
|
|
139
|
+
title: 'University', dataIndex: 'university', width: 400
|
|
140
|
+
},
|
|
141
|
+
{ title: 'Gender', dataIndex: 'gender' },
|
|
142
|
+
{ title: 'Email', dataIndex: 'email', width: 100 },
|
|
143
|
+
{ title: 'Phone', dataIndex: 'phone', width: 100 },
|
|
144
|
+
{ title: 'Birth Date', dataIndex: 'dob', width: 300, type: 'date' },
|
|
145
|
+
{ title: 'Role', dataIndex: 'role', width: 300 },
|
|
146
|
+
{ title: 'hobby', dataIndex: 'hobby', width: 300 },
|
|
147
|
+
{ title: 'Created Date', dataIndex: 'createdDate', width: 150,type: 'date' },
|
|
148
|
+
]
|
|
149
|
+
|
|
150
|
+
const users = [
|
|
151
|
+
{
|
|
152
|
+
"name": "Lowell Kassulke I",
|
|
153
|
+
"active": true,
|
|
154
|
+
"age": 40,
|
|
155
|
+
"gender": "Female to male transgender man",
|
|
156
|
+
"phone": "729.308.6202 x5063",
|
|
157
|
+
"email": "Zack_Koepp@hotmail.com",
|
|
158
|
+
"city": "Ameliafort",
|
|
159
|
+
"country": "India",
|
|
160
|
+
"dob": "2002-02-27",
|
|
161
|
+
"university": "Macejkovic - Cole University",
|
|
162
|
+
"hobby": "than",
|
|
163
|
+
"photo": "https://avatars.githubusercontent.com/u/43808697",
|
|
164
|
+
"role": "Mitchell - Barton",
|
|
165
|
+
"createdDate": "1968-10-08"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "Claudia McLaughlin",
|
|
169
|
+
"active": false,
|
|
170
|
+
"age": 44,
|
|
171
|
+
"gender": "Man",
|
|
172
|
+
"phone": "715-952-8923 x885",
|
|
173
|
+
"email": "Lilliana26@hotmail.com",
|
|
174
|
+
"city": "Gulfport",
|
|
175
|
+
"country": "Denmark",
|
|
176
|
+
"dob": "1981-06-17",
|
|
177
|
+
"university": "Kreiger, Witting and McCullough University",
|
|
178
|
+
"hobby": "with",
|
|
179
|
+
"photo": "https://avatars.githubusercontent.com/u/244402",
|
|
180
|
+
"role": "Schmidt, Bernier and Waelchi",
|
|
181
|
+
"createdDate": "1978-11-22"
|
|
182
|
+
},
|
|
183
|
+
]
|
|
80
184
|
|
|
81
185
|
return (
|
|
82
|
-
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
style={{ width: '100%', ...props.style }}
|
|
91
|
-
>
|
|
92
|
-
<MsTableHeader ref={theadRef} />
|
|
93
|
-
<MsTableBody ref={tbodyRef} />
|
|
94
|
-
</table>
|
|
95
|
-
</div>
|
|
96
|
-
{showPagination && <MsTableFooter />}
|
|
97
|
-
</TableProvider>
|
|
186
|
+
<>
|
|
187
|
+
<MsReactTable
|
|
188
|
+
columns={columns}
|
|
189
|
+
data={users}
|
|
190
|
+
height='400px'
|
|
191
|
+
onRowSelect={(data:any)=>{console.log('Selected Row Data:', data)}}
|
|
192
|
+
/>
|
|
193
|
+
</>
|
|
98
194
|
)
|
|
99
195
|
}
|
|
100
196
|
|
|
101
|
-
MsReactTable.displayName = 'MsReactTable'
|
|
102
|
-
export default MsReactTable
|
|
103
197
|
```
|
|
104
198
|
|
|
105
|
-
|
|
199
|
+
## `Row Selection`
|
|
106
200
|
|
|
107
|
-
|
|
201
|
+
```jsx
|
|
202
|
+
<MsReactTable
|
|
203
|
+
rowSelectConfig={{
|
|
204
|
+
showHeaderCheckbox:true,
|
|
205
|
+
selectionMode:'multiple', // single or multiple
|
|
206
|
+
headerCheckBoxTitle:'',
|
|
207
|
+
}}
|
|
208
|
+
columns={columns}
|
|
209
|
+
data={users}
|
|
210
|
+
height='400px'
|
|
211
|
+
onRowSelect={(data:any)=>{console.log('Selected Row Data:', data)}}
|
|
212
|
+
/>
|
|
213
|
+
```
|
|
214
|
+
#### Result For Single Selection
|
|
215
|
+
|
|
108
216
|
|
|
109
|
-
|
|
217
|
+
#### Result For Multi Selection
|
|
218
|
+
|
|
110
219
|
|
|
111
|
-
| Section | Component | Purpose |
|
|
112
|
-
|----------------|-------------------|-----------------------------------|
|
|
113
|
-
| Table Header | MsTableHeader | Renders table column headers. |
|
|
114
|
-
| Table Body | MsTableBody | Renders the visible row data. |
|
|
115
|
-
| Table Footer | MsTableFooter | Handles pagination UI (optional). |
|
|
116
220
|
|
|
117
|
-
|
|
221
|
+
## `Filter`
|
|
118
222
|
|
|
119
|
-
|
|
223
|
+
ms-react-table have default enabled for filter, you just need to Add `isFilterEnabled: true` to header cell config.
|
|
120
224
|
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
225
|
+
```jsx
|
|
226
|
+
const columns: MsTableHeaderCellTypes[] = [
|
|
227
|
+
{ title: 'Name', dataIndex: 'name', width: 100, isFilterEnabled: true },
|
|
228
|
+
{ title: 'Status', dataIndex: 'active', type: 'boolean', width: 100, isFilterEnabled: true, displayAs: { true: 'Enable', false: 'Diable' } },
|
|
229
|
+
{ title: 'Age', dataIndex: 'age', width: 100, resizable: false, type: 'number', isFilterEnabled: true },
|
|
230
|
+
{
|
|
231
|
+
title: 'University', dataIndex: 'university', width: 400, isFilterEnabled: true,
|
|
232
|
+
cellRenderer: (rowData, dataIndex) => {
|
|
233
|
+
return <div style={{ color: 'red' }} >{rowData[dataIndex]}</div>
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{ title: 'Gender', dataIndex: 'gender' },
|
|
237
|
+
{ title: 'Email', dataIndex: 'email', width: 100, isFilterEnabled: true },
|
|
238
|
+
{ title: 'Phone', dataIndex: 'phone', width: 100 },
|
|
239
|
+
{ title: 'Birth Date', dataIndex: 'dob', width: 300, isFilterEnabled: true, type: 'date' },
|
|
240
|
+
{ title: 'Role', dataIndex: 'role', width: 300, isFilterEnabled: true },
|
|
241
|
+
{ title: 'hobby', dataIndex: 'hobby', width: 300 },
|
|
242
|
+
{ title: 'Created Date', dataIndex: 'createdDate', width: 150, isFilterEnabled: true, type: 'date' },
|
|
243
|
+
]
|
|
131
244
|
```
|
|
245
|
+
#### Filter View
|
|
246
|
+
|
|
132
247
|
|
|
133
|
-
|
|
134
|
-
- The provider gives context (data, config, refs) to all child components.
|
|
135
|
-
- **MsTableHeader**, **MsTableBody**, and **MsTableFooter** consume the context.
|
|
136
|
-
- The root `<div>` ensures the table is scrollable if height constraints exist.
|
|
137
|
-
|
|
138
|
-
---
|
|
248
|
+
if you need your custom button to hide/show Filter Modal use RefObject as below jsx
|
|
139
249
|
|
|
140
|
-
|
|
250
|
+
```jsx
|
|
251
|
+
<>
|
|
252
|
+
<button onClick={()=>gridRef?.current.showFilterModal(true)}>Show Filter</button>
|
|
253
|
+
<MsReactTable
|
|
254
|
+
rowSelectConfig={{
|
|
255
|
+
showHeaderCheckbox:true,
|
|
256
|
+
selectionMode:'single',
|
|
257
|
+
headerCheckBoxTitle:'',
|
|
258
|
+
}}
|
|
259
|
+
columns={columns}
|
|
260
|
+
data={users}
|
|
261
|
+
height='600px'
|
|
262
|
+
hideDefaultFilterButton={true} // This prop will hide default filter toggle button from footer
|
|
263
|
+
/>
|
|
264
|
+
</>
|
|
265
|
+
```
|
|
141
266
|
|
|
142
|
-
|
|
143
|
-
|
|
267
|
+
Data Type used in filter
|
|
268
|
+
* String
|
|
269
|
+
* Integer
|
|
270
|
+
* Boolean (this will have radio button)
|
|
271
|
+
* Date
|
|
144
272
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
273
|
+
#### Use DisplayAs key to override true and false text
|
|
274
|
+
```jsx
|
|
275
|
+
{ title: 'Status', dataIndex: 'active', type: 'boolean', width: 100, isFilterEnabled: true, displayAs: { true: 'Enable', false: 'Disable' } },
|
|
276
|
+
```
|
|
149
277
|
|
|
150
|
-
|
|
151
|
-
{ id: 1, name: 'Alice' },
|
|
152
|
-
{ id: 2, name: 'Bob' }
|
|
153
|
-
];
|
|
278
|
+
## `Column Setup`
|
|
154
279
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
280
|
+
```jsx
|
|
281
|
+
{
|
|
282
|
+
title: 'Action',
|
|
283
|
+
dataIndex: 'action',
|
|
284
|
+
width: 100,
|
|
285
|
+
type: 'string',
|
|
286
|
+
hideActionMenu: true,
|
|
287
|
+
cellRenderer: (rowData, dataIndex) => {
|
|
288
|
+
return <div className='text-center'><Button label='#' onClick={() => console.log(rowData, dataIndex)} /></div>
|
|
289
|
+
},
|
|
290
|
+
isHidden: false,
|
|
291
|
+
isFilterEnabled: false,
|
|
292
|
+
resizable: false,
|
|
293
|
+
},
|
|
161
294
|
```
|
|
162
295
|
|
|
163
|
-
|
|
296
|
+
Features:
|
|
164
297
|
|
|
165
|
-
|
|
298
|
+
| **Key** | **Description** |
|
|
299
|
+
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
300
|
+
| `title` | The display name of the column header (`'Action'`). This is what users see at the top of the column. |
|
|
301
|
+
| `dataIndex` | The field identifier (`'action'`) used to map data from the dataset to this column. |
|
|
302
|
+
| `width` | The fixed width of the column (`100` pixels). Controls how much horizontal space the column occupies. |
|
|
303
|
+
| `type` | The data type of the column (`'string'`). Helps define how the column data should be interpreted or rendered. |
|
|
304
|
+
| `hideActionMenu` | Boolean (`true`). Hides the default action menu (like sorting, filtering, etc.) for this column. |
|
|
305
|
+
| `cellRenderer` | A custom rendering function. In this case, it renders a centered `<Button>` with label `'#'` that logs `rowData` and `dataIndex` when clicked. |
|
|
306
|
+
| `isHidden` | Boolean (`false`). Determines whether the column is visible. If set to `true`, the column will not be shown in the grid. |
|
|
307
|
+
| `isFilterEnabled` | Boolean (`false`). Controls whether filtering is enabled for this column. Here, filtering is disabled. |
|
|
308
|
+
| `resizable` | Boolean (`false`). Indicates whether the column width can be resized by the user. |
|
|
166
309
|
|
|
167
|
-
- **Component**: Returns a composite React element (`JSX.Element`) representing a styled, interactive table.
|
|
168
|
-
- **Refs**: Exposes underlying DOM elements via React refs for advanced use (scrolling, focusing, etc).
|
|
169
310
|
|
|
170
|
-
|
|
311
|
+
## Server Side Rendering
|
|
171
312
|
|
|
172
|
-
|
|
313
|
+
```jsx
|
|
314
|
+
const ServerSideRender = () => {
|
|
315
|
+
const columns: MsTableHeaderCellTypes[] = [
|
|
316
|
+
{ title: 'Id', dataIndex: 'id', width: 80},
|
|
317
|
+
{ title: 'Name', dataIndex: 'title', width: 100, isFilterEnabled: true },
|
|
318
|
+
{ title: 'Slug', dataIndex: 'slug', width: 100, isFilterEnabled: true },
|
|
319
|
+
{ title: 'price', dataIndex: 'price', type:'number', isFilterEnabled: true },
|
|
320
|
+
{ title: 'description', dataIndex: 'description', width: 300, isFilterEnabled: true },
|
|
321
|
+
{ title: 'category', dataIndex: 'category', width: 100, type:'object' },
|
|
322
|
+
{ title: 'creationAt', dataIndex: 'creationAt', width: 300, isFilterEnabled: true, type: 'date' },
|
|
323
|
+
{ title: 'updatedAt', dataIndex: 'updatedAt', width: 150 },
|
|
324
|
+
{ title: 'Created Date', dataIndex: 'createdDate', width: 150, isFilterEnabled: true, type: 'date' },
|
|
325
|
+
]
|
|
326
|
+
|
|
327
|
+
const gridRef = useRef<GridFunctions>(null!)
|
|
328
|
+
const [isLoading, setLoading]=useState(false)
|
|
173
329
|
|
|
174
|
-
|
|
175
|
-
|
|
330
|
+
const setRowData = (pageNo:number, pageSize:number, filters:filterValuesType, sortBy:{key:string, sortBy?: sortDirection}) => {
|
|
331
|
+
setLoading(true)
|
|
176
332
|
|
|
177
|
-
|
|
333
|
+
// Your API call logic goes here
|
|
334
|
+
// ...
|
|
178
335
|
|
|
179
|
-
|
|
336
|
+
gridRef?.current?.setRowData?.(users.data, users.total);
|
|
180
337
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
"content": "Always use the exported types for props and headers. Handle refs with care to avoid null dereferencing."
|
|
185
|
-
}
|
|
186
|
-
```
|
|
338
|
+
// Note: setRowData function of gridRef will set the data to the table and total records for pagination
|
|
339
|
+
|
|
340
|
+
setLoading(false)
|
|
187
341
|
|
|
188
|
-
|
|
342
|
+
}
|
|
189
343
|
|
|
190
|
-
## Summary Table
|
|
191
344
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
345
|
+
return (
|
|
346
|
+
<>
|
|
347
|
+
<MsReactTable
|
|
348
|
+
ref={gridRef}
|
|
349
|
+
isClientSideRendering={false}
|
|
350
|
+
columns={columns}
|
|
351
|
+
hideDefaultFilterButton={true}
|
|
352
|
+
height="calc(100vh - 200px)"
|
|
353
|
+
customComponentForNoRecords={<div>Custom Messaage will show here</div>}
|
|
354
|
+
setRowData={setRowData}
|
|
355
|
+
isLoading={isLoading}
|
|
356
|
+
/>
|
|
357
|
+
</>
|
|
358
|
+
)
|
|
359
|
+
}
|
|
360
|
+
```
|
|
361
|
+
##### Note:
|
|
362
|
+
* `isClientSideRendering={false}` This must be false, if you are using dynamic data
|
|
363
|
+
* setRowData Function will trigger on page ready and every event of pagination
|
|
198
364
|
|
|
199
|
-
|
|
365
|
+
|
|
200
366
|
|
|
201
|
-
##
|
|
367
|
+
## License
|
|
202
368
|
|
|
203
|
-
|
|
369
|
+
|