jattac.libs.web.responsive-table 0.7.0 → 0.7.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 +894 -729
- package/dist/Plugins/SortPlugin.d.ts +1 -1
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/package.json +65 -65
package/README.md
CHANGED
|
@@ -1,729 +1,894 @@
|
|
|
1
|
-
# ResponsiveTable: A Modern and Flexible React Table Component
|
|
2
|
-
|
|
3
|
-
ResponsiveTable is a powerful, lightweight, and fully responsive React component for creating beautiful and functional tables. It’s designed to look great on any device, adapting from a traditional table layout on desktops to a clean, card-based view on mobile screens.
|
|
4
|
-
|
|
5
|
-
## Table of Contents
|
|
6
|
-
|
|
7
|
-
- [Features](#features)
|
|
8
|
-
- [Installation](#installation)
|
|
9
|
-
- [Getting Started](#getting-started)
|
|
10
|
-
- [Comprehensive Examples](#comprehensive-examples)
|
|
11
|
-
- [Example 1: Loading State and Animations](#example-1-loading-state-and-animations)
|
|
12
|
-
- [Example 2: Adding a Clickable Row Action](#example-2-adding-a-clickable-row-action)
|
|
13
|
-
- [Example 3: Custom Cell Rendering](#example-3-custom-cell-rendering)
|
|
14
|
-
- [Example 4: Dynamic and Conditional Columns](#example-4-dynamic-and-conditional-columns)
|
|
15
|
-
- [Example 5: Advanced Footer with Labels and Interactivity](#example-5-advanced-footer-with-labels-and-interactivity)
|
|
16
|
-
- [Example 6: Disabling Page-Level Sticky Header](#example-6-disabling-page-level-sticky-header)
|
|
17
|
-
- [Plugin System](#plugin-system)
|
|
18
|
-
- [Plugin Execution Order](#plugin-execution-order)
|
|
19
|
-
- [How to Use Plugins](#how-to-use-plugins)
|
|
20
|
-
- [Built-in Plugins](#built-in-plugins)
|
|
21
|
-
- [SortPlugin](#sortplugin)
|
|
22
|
-
- [FilterPlugin](#filterplugin)
|
|
23
|
-
- [Infinite Scroll](#infinite-scroll)
|
|
24
|
-
- [API Reference](#api-reference)
|
|
25
|
-
- [ResponsiveTable Props](#responsivetable-props)
|
|
26
|
-
- [IResponsiveTableColumnDefinition<TData>](#iresponsivetablecolumndefinitiontdata)
|
|
27
|
-
- [IFooterRowDefinition](#ifooterrowdefinition)
|
|
28
|
-
- [IFooterColumnDefinition](#ifootercolumndefinition)
|
|
29
|
-
- [Breaking Changes](#breaking-changes)
|
|
30
|
-
- [Version 0.5.0](#version-050)
|
|
31
|
-
- [License](#license)
|
|
32
|
-
|
|
33
|
-
## Features
|
|
34
|
-
|
|
35
|
-
- **Mobile-First Design**: Automatically switches to a card layout on smaller screens for optimal readability.
|
|
36
|
-
- **Highly Customizable**: Tailor the look and feel of columns, headers, and footers.
|
|
37
|
-
- **Dynamic Data Handling**: Define columns and footers based on your data or application state.
|
|
38
|
-
- **Delightful Animations**: Includes an optional skeleton loader and staggered row entrance animations.
|
|
39
|
-
- **Interactive Elements**: Easily add click handlers for rows, headers, and footer cells.
|
|
40
|
-
- **Efficient & Responsive**: Built with efficiency in mind, including debounced resize handling for smooth transitions.
|
|
41
|
-
- **Easy to Use**: A simple and intuitive API for quick integration.
|
|
42
|
-
- **Extensible Plugin System**: Easily add new functionalities like filtering, sorting, or infinite scrolling.
|
|
43
|
-
|
|
44
|
-
## Installation
|
|
45
|
-
|
|
46
|
-
To get started, install the package from npm:
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
npm install jattac.libs.web.responsive-table
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Getting Started
|
|
53
|
-
|
|
54
|
-
Here’s a basic example to get you up and running in minutes.
|
|
55
|
-
|
|
56
|
-
```jsx
|
|
57
|
-
import React from 'react';
|
|
58
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
59
|
-
|
|
60
|
-
const GettingStarted = () => {
|
|
61
|
-
const columns = [
|
|
62
|
-
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name },
|
|
63
|
-
{ displayLabel: 'Age', dataKey: 'age', cellRenderer: (row) => row.age },
|
|
64
|
-
{ displayLabel: 'City', dataKey: 'city', cellRenderer: (row) => row.city },
|
|
65
|
-
];
|
|
66
|
-
|
|
67
|
-
const data = [
|
|
68
|
-
{ name: 'Alice', age: 32, city: 'New York' },
|
|
69
|
-
{ name: 'Bob', age: 28, city: 'Los Angeles' },
|
|
70
|
-
{ name: 'Charlie', age: 45, city: 'Chicago' },
|
|
71
|
-
];
|
|
72
|
-
|
|
73
|
-
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export default GettingStarted;
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
This will render a table that automatically adapts to the screen size. On a desktop, it will look like a standard table, and on mobile, it will switch to a card-based layout.
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
## Comprehensive Examples
|
|
84
|
-
|
|
85
|
-
### Example 1: Loading State and Animations
|
|
86
|
-
|
|
87
|
-
You can provide a seamless user experience by showing a skeleton loader while your data is being fetched, and then animating the rows in when the data is ready.
|
|
88
|
-
|
|
89
|
-
```jsx
|
|
90
|
-
import React, { useState, useEffect } from 'react';
|
|
91
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
92
|
-
|
|
93
|
-
const AnimatedTable = () => {
|
|
94
|
-
const [data, setData] = useState([]);
|
|
95
|
-
const [isLoading, setIsLoading] = useState(true);
|
|
96
|
-
|
|
97
|
-
const columns = [
|
|
98
|
-
{ displayLabel: 'User', cellRenderer: (row) => row.name },
|
|
99
|
-
{ displayLabel: 'Email', cellRenderer: (row) => row.email },
|
|
100
|
-
];
|
|
101
|
-
|
|
102
|
-
useEffect(() => {
|
|
103
|
-
// Simulate a network request
|
|
104
|
-
setTimeout(() => {
|
|
105
|
-
setData([
|
|
106
|
-
{ name: 'Grace', email: 'grace@example.com' },
|
|
107
|
-
{ name: 'Henry', email: 'henry@example.com' },
|
|
108
|
-
]);
|
|
109
|
-
setIsLoading(false);
|
|
110
|
-
}, 2000);
|
|
111
|
-
}, []);
|
|
112
|
-
|
|
113
|
-
return (
|
|
114
|
-
<ResponsiveTable columnDefinitions={columns} data={data} animationProps={{ isLoading, animateOnLoad: true }} />
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Example 2: Adding a Clickable Row Action
|
|
120
|
-
|
|
121
|
-
You can make rows clickable to perform actions, such as navigating to a details page or opening a modal.
|
|
122
|
-
|
|
123
|
-
```jsx
|
|
124
|
-
import React from 'react';
|
|
125
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
126
|
-
|
|
127
|
-
const ClickableRows = () => {
|
|
128
|
-
const columns = [
|
|
129
|
-
{ displayLabel: 'Product', cellRenderer: (row) => row.product },
|
|
130
|
-
{ displayLabel: 'Price', cellRenderer: (row) => `${row.price.toFixed(2)}` },
|
|
131
|
-
];
|
|
132
|
-
|
|
133
|
-
const data = [
|
|
134
|
-
{ id: 1, product: 'Laptop', price: 1200 },
|
|
135
|
-
{ id: 2, product: 'Keyboard', price: 75 },
|
|
136
|
-
];
|
|
137
|
-
|
|
138
|
-
const handleRowClick = (item) => {
|
|
139
|
-
alert(`You clicked on product ID: ${item.id}`);
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
return <ResponsiveTable columnDefinitions={columns} data={data} onRowClick={handleRowClick} />;
|
|
143
|
-
};
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### Example 3: Custom Cell Rendering
|
|
147
|
-
|
|
148
|
-
You can render any React component inside a cell, allowing for rich content like buttons, links, or status badges.
|
|
149
|
-
|
|
150
|
-
```jsx
|
|
151
|
-
import React from 'react';
|
|
152
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
153
|
-
|
|
154
|
-
const CustomCells = () => {
|
|
155
|
-
const columns = [
|
|
156
|
-
{ displayLabel: <strong>User</strong>, cellRenderer: (row) => <strong>{row.user}</strong> },
|
|
157
|
-
{
|
|
158
|
-
displayLabel: 'Status',
|
|
159
|
-
cellRenderer: (row) => (
|
|
160
|
-
<span
|
|
161
|
-
style={{
|
|
162
|
-
color: row.status === 'Active' ? 'green' : 'red',
|
|
163
|
-
fontWeight: 'bold',
|
|
164
|
-
}}
|
|
165
|
-
>
|
|
166
|
-
{row.status}
|
|
167
|
-
</span>
|
|
168
|
-
),
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
displayLabel: 'Action',
|
|
172
|
-
cellRenderer: (row) => <button onClick={() => alert(`Editing ${row.user}`)}>Edit</button>,
|
|
173
|
-
},
|
|
174
|
-
];
|
|
175
|
-
|
|
176
|
-
const data = [
|
|
177
|
-
{ user: 'Eve', status: 'Active' },
|
|
178
|
-
{ user: 'Frank', status: 'Inactive' },
|
|
179
|
-
];
|
|
180
|
-
|
|
181
|
-
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
182
|
-
};
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
### Example 4: Dynamic and Conditional Columns
|
|
186
|
-
|
|
187
|
-
Columns can be generated dynamically based on your data or application state. This is useful for creating flexible tables that adapt to different datasets.
|
|
188
|
-
|
|
189
|
-
```jsx
|
|
190
|
-
import React from 'react';
|
|
191
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
192
|
-
|
|
193
|
-
const DynamicColumns = ({ isAdmin }) => {
|
|
194
|
-
// Base columns for all users
|
|
195
|
-
const columns = [
|
|
196
|
-
{ displayLabel: 'File Name', cellRenderer: (row) => row.fileName },
|
|
197
|
-
{ displayLabel: 'Size', cellRenderer: (row) => `${row.size} KB` },
|
|
198
|
-
];
|
|
199
|
-
|
|
200
|
-
// Add an admin-only column conditionally
|
|
201
|
-
if (isAdmin) {
|
|
202
|
-
columns.push({
|
|
203
|
-
displayLabel: 'Admin Actions',
|
|
204
|
-
cellRenderer: (row) => <button onClick={() => alert(`Deleting ${row.fileName}`)}>Delete</button>,
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
const data = [
|
|
209
|
-
{ fileName: 'document.pdf', size: 1024 },
|
|
210
|
-
{ fileName: 'image.jpg', size: 512 },
|
|
211
|
-
];
|
|
212
|
-
|
|
213
|
-
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
214
|
-
};
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
### Example 5: Advanced Footer with Labels and Interactivity
|
|
218
|
-
|
|
219
|
-
You can add a footer to display summary information, such as totals or averages. The footer is also responsive and will appear correctly in both desktop and mobile views. With the enhanced footer functionality, you can provide explicit labels for mobile view and add click handlers to footer cells.
|
|
220
|
-
|
|
221
|
-
```jsx
|
|
222
|
-
import React from 'react';
|
|
223
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
224
|
-
|
|
225
|
-
const TableWithFooter = () => {
|
|
226
|
-
const columns = [
|
|
227
|
-
{ displayLabel: 'Item', cellRenderer: (row) => row.item },
|
|
228
|
-
{ displayLabel: 'Quantity', cellRenderer: (row) => row.quantity },
|
|
229
|
-
{ displayLabel: 'Price', cellRenderer: (row) => `${row.price.toFixed(2)}` },
|
|
230
|
-
];
|
|
231
|
-
|
|
232
|
-
const data = [
|
|
233
|
-
{ item: 'Apples', quantity: 10, price: 1.5 },
|
|
234
|
-
{ item: 'Oranges', quantity: 5, price: 2.0 },
|
|
235
|
-
{ item: 'Bananas', quantity: 15, price: 0.5 },
|
|
236
|
-
];
|
|
237
|
-
|
|
238
|
-
const total = data.reduce((sum, row) => sum + row.quantity * row.price, 0);
|
|
239
|
-
|
|
240
|
-
const footerRows = [
|
|
241
|
-
{
|
|
242
|
-
columns: [
|
|
243
|
-
{
|
|
244
|
-
colSpan: 2,
|
|
245
|
-
cellRenderer: () => <strong>Total:</strong>,
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
colSpan: 1,
|
|
249
|
-
displayLabel: 'Total',
|
|
250
|
-
cellRenderer: () => <strong>${total.toFixed(2)}</strong>,
|
|
251
|
-
onCellClick: () => alert('Total clicked!'),
|
|
252
|
-
},
|
|
253
|
-
],
|
|
254
|
-
},
|
|
255
|
-
];
|
|
256
|
-
|
|
257
|
-
return <ResponsiveTable columnDefinitions={columns} data={data} footerRows={footerRows} />;
|
|
258
|
-
};
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
### Example 6: Disabling Page-Level Sticky Header
|
|
262
|
-
|
|
263
|
-
By default, the table header remains fixed to the top of the viewport as the user scrolls down the page. This ensures the column titles are always visible. To disable this behavior and have the header scroll away with the rest of the page, set the `enablePageLevelStickyHeader` prop to `false`.
|
|
264
|
-
|
|
265
|
-
```jsx
|
|
266
|
-
import React from 'react';
|
|
267
|
-
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
268
|
-
|
|
269
|
-
const NonStickyHeaderTable = () => {
|
|
270
|
-
// We need enough data to make the page scroll
|
|
271
|
-
const data = Array.from({ length: 50 }, (_, i) => ({
|
|
272
|
-
id: i + 1,
|
|
273
|
-
item: `Item #${i + 1}`,
|
|
274
|
-
description: 'This is a sample item.',
|
|
275
|
-
}));
|
|
276
|
-
|
|
277
|
-
const columns = [
|
|
278
|
-
{ displayLabel: 'ID', cellRenderer: (row) => row.id },
|
|
279
|
-
{ displayLabel: 'Item', cellRenderer: (row) => row.item },
|
|
280
|
-
{ displayLabel: 'Description', cellRenderer: (row) => row.description },
|
|
281
|
-
];
|
|
282
|
-
|
|
283
|
-
return (
|
|
284
|
-
<div>
|
|
285
|
-
<h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>Scroll down to see the table</h1>
|
|
286
|
-
<ResponsiveTable
|
|
287
|
-
columnDefinitions={columns}
|
|
288
|
-
data={data}
|
|
289
|
-
enablePageLevelStickyHeader={false} // <-- Here's the magic switch!
|
|
290
|
-
/>
|
|
291
|
-
<div style={{ height: '50vh' }} />
|
|
292
|
-
</div>
|
|
293
|
-
);
|
|
294
|
-
};
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
---
|
|
298
|
-
|
|
299
|
-
## Plugin System
|
|
300
|
-
|
|
301
|
-
ResponsiveTable is designed with an extensible plugin system, allowing developers to easily add new functionalities or modify existing behaviors without altering the core component. Plugins can interact with the table's data, render custom UI elements (like headers or footers), and respond to table events.
|
|
302
|
-
|
|
303
|
-
### Plugin Execution Order
|
|
304
|
-
|
|
305
|
-
> **Note:** Plugins process data sequentially in the order they are provided in the `plugins` array. This can have important performance and behavioral implications.
|
|
306
|
-
|
|
307
|
-
For example, consider the `SortPlugin` and `FilterPlugin`.
|
|
308
|
-
|
|
309
|
-
- `plugins={[new SortPlugin(), new FilterPlugin()]}`: This will **sort** the entire dataset first, and then **filter** the sorted data.
|
|
310
|
-
- `plugins={[new FilterPlugin(), new SortPlugin()]}`: This will **filter** the dataset first, and then **sort** the much smaller, filtered result.
|
|
311
|
-
|
|
312
|
-
For the best performance, it is highly recommended to **filter first, then sort**.
|
|
313
|
-
|
|
314
|
-
### How to Use Plugins
|
|
315
|
-
|
|
316
|
-
Plugins are passed to the `ResponsiveTable` component via the `plugins` prop, which accepts an array of `IResponsiveTablePlugin` instances. Some common functionalities, like filtering and infinite scrolling, are provided as built-in plugins that can be enabled via specific props (`filterProps` and `infiniteScrollProps`). When these props are used, the corresponding built-in plugins are automatically initialized if not already provided in the `plugins` array.
|
|
317
|
-
|
|
318
|
-
```jsx
|
|
319
|
-
import React from 'react';
|
|
320
|
-
// Note: All plugins are exported from the main package entry point.
|
|
321
|
-
import ResponsiveTable, { FilterPlugin } from 'jattac.libs.web.responsive-table';
|
|
322
|
-
|
|
323
|
-
const MyTableWithPlugins = () => {
|
|
324
|
-
const columns = [
|
|
325
|
-
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
|
|
326
|
-
{
|
|
327
|
-
displayLabel: 'Age',
|
|
328
|
-
dataKey: 'age',
|
|
329
|
-
cellRenderer: (row) => row.age,
|
|
330
|
-
getFilterableValue: (row) => row.age.toString(),
|
|
331
|
-
},
|
|
332
|
-
];
|
|
333
|
-
|
|
334
|
-
const data = [
|
|
335
|
-
{ name: 'Alice', age: 32 },
|
|
336
|
-
{ name: 'Bob', age: 28 },
|
|
337
|
-
{ name: 'Charlie', age: 45 },
|
|
338
|
-
];
|
|
339
|
-
|
|
340
|
-
return (
|
|
341
|
-
<ResponsiveTable
|
|
342
|
-
columnDefinitions={columns}
|
|
343
|
-
data={data}
|
|
344
|
-
// Enable built-in filter plugin via props
|
|
345
|
-
filterProps={{ showFilter: true, filterPlaceholder: 'Search by name or age...' }}
|
|
346
|
-
// Or provide a custom instance of the plugin
|
|
347
|
-
// plugins={[new FilterPlugin()]}
|
|
348
|
-
/>
|
|
349
|
-
);
|
|
350
|
-
};
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
###
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
**
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
{
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
{
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
{
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
```
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
//
|
|
580
|
-
//
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
//
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
```
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
|
651
|
-
|
|
|
652
|
-
| `
|
|
653
|
-
| `
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
|
661
|
-
|
|
|
662
|
-
| `
|
|
663
|
-
| `
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
|
675
|
-
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
1
|
+
# ResponsiveTable: A Modern and Flexible React Table Component
|
|
2
|
+
|
|
3
|
+
ResponsiveTable is a powerful, lightweight, and fully responsive React component for creating beautiful and functional tables. It’s designed to look great on any device, adapting from a traditional table layout on desktops to a clean, card-based view on mobile screens.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [Features](#features)
|
|
8
|
+
- [Installation](#installation)
|
|
9
|
+
- [Getting Started](#getting-started)
|
|
10
|
+
- [Comprehensive Examples](#comprehensive-examples)
|
|
11
|
+
- [Example 1: Loading State and Animations](#example-1-loading-state-and-animations)
|
|
12
|
+
- [Example 2: Adding a Clickable Row Action](#example-2-adding-a-clickable-row-action)
|
|
13
|
+
- [Example 3: Custom Cell Rendering](#example-3-custom-cell-rendering)
|
|
14
|
+
- [Example 4: Dynamic and Conditional Columns](#example-4-dynamic-and-conditional-columns)
|
|
15
|
+
- [Example 5: Advanced Footer with Labels and Interactivity](#example-5-advanced-footer-with-labels-and-interactivity)
|
|
16
|
+
- [Example 6: Disabling Page-Level Sticky Header](#example-6-disabling-page-level-sticky-header)
|
|
17
|
+
- [Plugin System](#plugin-system)
|
|
18
|
+
- [Plugin Execution Order](#plugin-execution-order)
|
|
19
|
+
- [How to Use Plugins](#how-to-use-plugins)
|
|
20
|
+
- [Built-in Plugins](#built-in-plugins)
|
|
21
|
+
- [SortPlugin](#sortplugin)
|
|
22
|
+
- [FilterPlugin](#filterplugin)
|
|
23
|
+
- [Infinite Scroll](#infinite-scroll)
|
|
24
|
+
- [API Reference](#api-reference)
|
|
25
|
+
- [ResponsiveTable Props](#responsivetable-props)
|
|
26
|
+
- [IResponsiveTableColumnDefinition<TData>](#iresponsivetablecolumndefinitiontdata)
|
|
27
|
+
- [IFooterRowDefinition](#ifooterrowdefinition)
|
|
28
|
+
- [IFooterColumnDefinition](#ifootercolumndefinition)
|
|
29
|
+
- [Breaking Changes](#breaking-changes)
|
|
30
|
+
- [Version 0.5.0](#version-050)
|
|
31
|
+
- [License](#license)
|
|
32
|
+
|
|
33
|
+
## Features
|
|
34
|
+
|
|
35
|
+
- **Mobile-First Design**: Automatically switches to a card layout on smaller screens for optimal readability.
|
|
36
|
+
- **Highly Customizable**: Tailor the look and feel of columns, headers, and footers.
|
|
37
|
+
- **Dynamic Data Handling**: Define columns and footers based on your data or application state.
|
|
38
|
+
- **Delightful Animations**: Includes an optional skeleton loader and staggered row entrance animations.
|
|
39
|
+
- **Interactive Elements**: Easily add click handlers for rows, headers, and footer cells.
|
|
40
|
+
- **Efficient & Responsive**: Built with efficiency in mind, including debounced resize handling for smooth transitions.
|
|
41
|
+
- **Easy to Use**: A simple and intuitive API for quick integration.
|
|
42
|
+
- **Extensible Plugin System**: Easily add new functionalities like filtering, sorting, or infinite scrolling.
|
|
43
|
+
|
|
44
|
+
## Installation
|
|
45
|
+
|
|
46
|
+
To get started, install the package from npm:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm install jattac.libs.web.responsive-table
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Getting Started
|
|
53
|
+
|
|
54
|
+
Here’s a basic example to get you up and running in minutes.
|
|
55
|
+
|
|
56
|
+
```jsx
|
|
57
|
+
import React from 'react';
|
|
58
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
59
|
+
|
|
60
|
+
const GettingStarted = () => {
|
|
61
|
+
const columns = [
|
|
62
|
+
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name },
|
|
63
|
+
{ displayLabel: 'Age', dataKey: 'age', cellRenderer: (row) => row.age },
|
|
64
|
+
{ displayLabel: 'City', dataKey: 'city', cellRenderer: (row) => row.city },
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
const data = [
|
|
68
|
+
{ name: 'Alice', age: 32, city: 'New York' },
|
|
69
|
+
{ name: 'Bob', age: 28, city: 'Los Angeles' },
|
|
70
|
+
{ name: 'Charlie', age: 45, city: 'Chicago' },
|
|
71
|
+
];
|
|
72
|
+
|
|
73
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export default GettingStarted;
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
This will render a table that automatically adapts to the screen size. On a desktop, it will look like a standard table, and on mobile, it will switch to a card-based layout.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Comprehensive Examples
|
|
84
|
+
|
|
85
|
+
### Example 1: Loading State and Animations
|
|
86
|
+
|
|
87
|
+
You can provide a seamless user experience by showing a skeleton loader while your data is being fetched, and then animating the rows in when the data is ready.
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
import React, { useState, useEffect } from 'react';
|
|
91
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
92
|
+
|
|
93
|
+
const AnimatedTable = () => {
|
|
94
|
+
const [data, setData] = useState([]);
|
|
95
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
96
|
+
|
|
97
|
+
const columns = [
|
|
98
|
+
{ displayLabel: 'User', cellRenderer: (row) => row.name },
|
|
99
|
+
{ displayLabel: 'Email', cellRenderer: (row) => row.email },
|
|
100
|
+
];
|
|
101
|
+
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
// Simulate a network request
|
|
104
|
+
setTimeout(() => {
|
|
105
|
+
setData([
|
|
106
|
+
{ name: 'Grace', email: 'grace@example.com' },
|
|
107
|
+
{ name: 'Henry', email: 'henry@example.com' },
|
|
108
|
+
]);
|
|
109
|
+
setIsLoading(false);
|
|
110
|
+
}, 2000);
|
|
111
|
+
}, []);
|
|
112
|
+
|
|
113
|
+
return (
|
|
114
|
+
<ResponsiveTable columnDefinitions={columns} data={data} animationProps={{ isLoading, animateOnLoad: true }} />
|
|
115
|
+
);
|
|
116
|
+
};
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Example 2: Adding a Clickable Row Action
|
|
120
|
+
|
|
121
|
+
You can make rows clickable to perform actions, such as navigating to a details page or opening a modal.
|
|
122
|
+
|
|
123
|
+
```jsx
|
|
124
|
+
import React from 'react';
|
|
125
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
126
|
+
|
|
127
|
+
const ClickableRows = () => {
|
|
128
|
+
const columns = [
|
|
129
|
+
{ displayLabel: 'Product', cellRenderer: (row) => row.product },
|
|
130
|
+
{ displayLabel: 'Price', cellRenderer: (row) => `${row.price.toFixed(2)}` },
|
|
131
|
+
];
|
|
132
|
+
|
|
133
|
+
const data = [
|
|
134
|
+
{ id: 1, product: 'Laptop', price: 1200 },
|
|
135
|
+
{ id: 2, product: 'Keyboard', price: 75 },
|
|
136
|
+
];
|
|
137
|
+
|
|
138
|
+
const handleRowClick = (item) => {
|
|
139
|
+
alert(`You clicked on product ID: ${item.id}`);
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} onRowClick={handleRowClick} />;
|
|
143
|
+
};
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Example 3: Custom Cell Rendering
|
|
147
|
+
|
|
148
|
+
You can render any React component inside a cell, allowing for rich content like buttons, links, or status badges.
|
|
149
|
+
|
|
150
|
+
```jsx
|
|
151
|
+
import React from 'react';
|
|
152
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
153
|
+
|
|
154
|
+
const CustomCells = () => {
|
|
155
|
+
const columns = [
|
|
156
|
+
{ displayLabel: <strong>User</strong>, cellRenderer: (row) => <strong>{row.user}</strong> },
|
|
157
|
+
{
|
|
158
|
+
displayLabel: 'Status',
|
|
159
|
+
cellRenderer: (row) => (
|
|
160
|
+
<span
|
|
161
|
+
style={{
|
|
162
|
+
color: row.status === 'Active' ? 'green' : 'red',
|
|
163
|
+
fontWeight: 'bold',
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
166
|
+
{row.status}
|
|
167
|
+
</span>
|
|
168
|
+
),
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
displayLabel: 'Action',
|
|
172
|
+
cellRenderer: (row) => <button onClick={() => alert(`Editing ${row.user}`)}>Edit</button>,
|
|
173
|
+
},
|
|
174
|
+
];
|
|
175
|
+
|
|
176
|
+
const data = [
|
|
177
|
+
{ user: 'Eve', status: 'Active' },
|
|
178
|
+
{ user: 'Frank', status: 'Inactive' },
|
|
179
|
+
];
|
|
180
|
+
|
|
181
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
182
|
+
};
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Example 4: Dynamic and Conditional Columns
|
|
186
|
+
|
|
187
|
+
Columns can be generated dynamically based on your data or application state. This is useful for creating flexible tables that adapt to different datasets.
|
|
188
|
+
|
|
189
|
+
```jsx
|
|
190
|
+
import React from 'react';
|
|
191
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
192
|
+
|
|
193
|
+
const DynamicColumns = ({ isAdmin }) => {
|
|
194
|
+
// Base columns for all users
|
|
195
|
+
const columns = [
|
|
196
|
+
{ displayLabel: 'File Name', cellRenderer: (row) => row.fileName },
|
|
197
|
+
{ displayLabel: 'Size', cellRenderer: (row) => `${row.size} KB` },
|
|
198
|
+
];
|
|
199
|
+
|
|
200
|
+
// Add an admin-only column conditionally
|
|
201
|
+
if (isAdmin) {
|
|
202
|
+
columns.push({
|
|
203
|
+
displayLabel: 'Admin Actions',
|
|
204
|
+
cellRenderer: (row) => <button onClick={() => alert(`Deleting ${row.fileName}`)}>Delete</button>,
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
const data = [
|
|
209
|
+
{ fileName: 'document.pdf', size: 1024 },
|
|
210
|
+
{ fileName: 'image.jpg', size: 512 },
|
|
211
|
+
];
|
|
212
|
+
|
|
213
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} />;
|
|
214
|
+
};
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### Example 5: Advanced Footer with Labels and Interactivity
|
|
218
|
+
|
|
219
|
+
You can add a footer to display summary information, such as totals or averages. The footer is also responsive and will appear correctly in both desktop and mobile views. With the enhanced footer functionality, you can provide explicit labels for mobile view and add click handlers to footer cells.
|
|
220
|
+
|
|
221
|
+
```jsx
|
|
222
|
+
import React from 'react';
|
|
223
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
224
|
+
|
|
225
|
+
const TableWithFooter = () => {
|
|
226
|
+
const columns = [
|
|
227
|
+
{ displayLabel: 'Item', cellRenderer: (row) => row.item },
|
|
228
|
+
{ displayLabel: 'Quantity', cellRenderer: (row) => row.quantity },
|
|
229
|
+
{ displayLabel: 'Price', cellRenderer: (row) => `${row.price.toFixed(2)}` },
|
|
230
|
+
];
|
|
231
|
+
|
|
232
|
+
const data = [
|
|
233
|
+
{ item: 'Apples', quantity: 10, price: 1.5 },
|
|
234
|
+
{ item: 'Oranges', quantity: 5, price: 2.0 },
|
|
235
|
+
{ item: 'Bananas', quantity: 15, price: 0.5 },
|
|
236
|
+
];
|
|
237
|
+
|
|
238
|
+
const total = data.reduce((sum, row) => sum + row.quantity * row.price, 0);
|
|
239
|
+
|
|
240
|
+
const footerRows = [
|
|
241
|
+
{
|
|
242
|
+
columns: [
|
|
243
|
+
{
|
|
244
|
+
colSpan: 2,
|
|
245
|
+
cellRenderer: () => <strong>Total:</strong>,
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
colSpan: 1,
|
|
249
|
+
displayLabel: 'Total',
|
|
250
|
+
cellRenderer: () => <strong>${total.toFixed(2)}</strong>,
|
|
251
|
+
onCellClick: () => alert('Total clicked!'),
|
|
252
|
+
},
|
|
253
|
+
],
|
|
254
|
+
},
|
|
255
|
+
];
|
|
256
|
+
|
|
257
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} footerRows={footerRows} />;
|
|
258
|
+
};
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Example 6: Disabling Page-Level Sticky Header
|
|
262
|
+
|
|
263
|
+
By default, the table header remains fixed to the top of the viewport as the user scrolls down the page. This ensures the column titles are always visible. To disable this behavior and have the header scroll away with the rest of the page, set the `enablePageLevelStickyHeader` prop to `false`.
|
|
264
|
+
|
|
265
|
+
```jsx
|
|
266
|
+
import React from 'react';
|
|
267
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
268
|
+
|
|
269
|
+
const NonStickyHeaderTable = () => {
|
|
270
|
+
// We need enough data to make the page scroll
|
|
271
|
+
const data = Array.from({ length: 50 }, (_, i) => ({
|
|
272
|
+
id: i + 1,
|
|
273
|
+
item: `Item #${i + 1}`,
|
|
274
|
+
description: 'This is a sample item.',
|
|
275
|
+
}));
|
|
276
|
+
|
|
277
|
+
const columns = [
|
|
278
|
+
{ displayLabel: 'ID', cellRenderer: (row) => row.id },
|
|
279
|
+
{ displayLabel: 'Item', cellRenderer: (row) => row.item },
|
|
280
|
+
{ displayLabel: 'Description', cellRenderer: (row) => row.description },
|
|
281
|
+
];
|
|
282
|
+
|
|
283
|
+
return (
|
|
284
|
+
<div>
|
|
285
|
+
<h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>Scroll down to see the table</h1>
|
|
286
|
+
<ResponsiveTable
|
|
287
|
+
columnDefinitions={columns}
|
|
288
|
+
data={data}
|
|
289
|
+
enablePageLevelStickyHeader={false} // <-- Here's the magic switch!
|
|
290
|
+
/>
|
|
291
|
+
<div style={{ height: '50vh' }} />
|
|
292
|
+
</div>
|
|
293
|
+
);
|
|
294
|
+
};
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
## Plugin System
|
|
300
|
+
|
|
301
|
+
ResponsiveTable is designed with an extensible plugin system, allowing developers to easily add new functionalities or modify existing behaviors without altering the core component. Plugins can interact with the table's data, render custom UI elements (like headers or footers), and respond to table events.
|
|
302
|
+
|
|
303
|
+
### Plugin Execution Order
|
|
304
|
+
|
|
305
|
+
> **Note:** Plugins process data sequentially in the order they are provided in the `plugins` array. This can have important performance and behavioral implications.
|
|
306
|
+
|
|
307
|
+
For example, consider the `SortPlugin` and `FilterPlugin`.
|
|
308
|
+
|
|
309
|
+
- `plugins={[new SortPlugin(), new FilterPlugin()]}`: This will **sort** the entire dataset first, and then **filter** the sorted data.
|
|
310
|
+
- `plugins={[new FilterPlugin(), new SortPlugin()]}`: This will **filter** the dataset first, and then **sort** the much smaller, filtered result.
|
|
311
|
+
|
|
312
|
+
For the best performance, it is highly recommended to **filter first, then sort**.
|
|
313
|
+
|
|
314
|
+
### How to Use Plugins
|
|
315
|
+
|
|
316
|
+
Plugins are passed to the `ResponsiveTable` component via the `plugins` prop, which accepts an array of `IResponsiveTablePlugin` instances. Some common functionalities, like filtering and infinite scrolling, are provided as built-in plugins that can be enabled via specific props (`filterProps` and `infiniteScrollProps`). When these props are used, the corresponding built-in plugins are automatically initialized if not already provided in the `plugins` array.
|
|
317
|
+
|
|
318
|
+
```jsx
|
|
319
|
+
import React from 'react';
|
|
320
|
+
// Note: All plugins are exported from the main package entry point.
|
|
321
|
+
import ResponsiveTable, { FilterPlugin } from 'jattac.libs.web.responsive-table';
|
|
322
|
+
|
|
323
|
+
const MyTableWithPlugins = () => {
|
|
324
|
+
const columns = [
|
|
325
|
+
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
|
|
326
|
+
{
|
|
327
|
+
displayLabel: 'Age',
|
|
328
|
+
dataKey: 'age',
|
|
329
|
+
cellRenderer: (row) => row.age,
|
|
330
|
+
getFilterableValue: (row) => row.age.toString(),
|
|
331
|
+
},
|
|
332
|
+
];
|
|
333
|
+
|
|
334
|
+
const data = [
|
|
335
|
+
{ name: 'Alice', age: 32 },
|
|
336
|
+
{ name: 'Bob', age: 28 },
|
|
337
|
+
{ name: 'Charlie', age: 45 },
|
|
338
|
+
];
|
|
339
|
+
|
|
340
|
+
return (
|
|
341
|
+
<ResponsiveTable
|
|
342
|
+
columnDefinitions={columns}
|
|
343
|
+
data={data}
|
|
344
|
+
// Enable built-in filter plugin via props
|
|
345
|
+
filterProps={{ showFilter: true, filterPlaceholder: 'Search by name or age...' }}
|
|
346
|
+
// Or provide a custom instance of the plugin
|
|
347
|
+
// plugins={[new FilterPlugin()]}
|
|
348
|
+
/>
|
|
349
|
+
);
|
|
350
|
+
};
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
### How to Use Plugins
|
|
354
|
+
|
|
355
|
+
Plugins are passed to the `ResponsiveTable` component via the `plugins` prop, which accepts an array of `IResponsiveTablePlugin` instances. Some common functionalities, like filtering and infinite scrolling, are provided as built-in plugins that can be enabled via specific props (`filterProps` and `infiniteScrollProps`). When these props are used, the corresponding built-in plugins are automatically initialized if not already provided in the `plugins` array.
|
|
356
|
+
|
|
357
|
+
```jsx
|
|
358
|
+
import React from 'react';
|
|
359
|
+
// Note: All plugins are exported from the main package entry point.
|
|
360
|
+
import ResponsiveTable, { FilterPlugin } from 'jattac.libs.web.responsive-table';
|
|
361
|
+
|
|
362
|
+
const MyTableWithPlugins = () => {
|
|
363
|
+
const columns = [
|
|
364
|
+
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
|
|
365
|
+
{
|
|
366
|
+
displayLabel: 'Age',
|
|
367
|
+
dataKey: 'age',
|
|
368
|
+
cellRenderer: (row) => row.age,
|
|
369
|
+
getFilterableValue: (row) => row.age.toString(),
|
|
370
|
+
},
|
|
371
|
+
];
|
|
372
|
+
|
|
373
|
+
const data = [
|
|
374
|
+
{ name: 'Alice', age: 32 },
|
|
375
|
+
{ name: 'Bob', age: 28 },
|
|
376
|
+
{ name: 'Charlie', age: 45 },
|
|
377
|
+
];
|
|
378
|
+
|
|
379
|
+
return (
|
|
380
|
+
<ResponsiveTable
|
|
381
|
+
columnDefinitions={columns}
|
|
382
|
+
data={data}
|
|
383
|
+
// Enable built-in filter plugin via props
|
|
384
|
+
filterProps={{ showFilter: true, filterPlaceholder: 'Search by name or age...' }}
|
|
385
|
+
// Or provide a custom instance of the plugin
|
|
386
|
+
// plugins={[new FilterPlugin()]}
|
|
387
|
+
/>
|
|
388
|
+
);
|
|
389
|
+
};
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
### Building a Custom Row Selection Plugin
|
|
393
|
+
|
|
394
|
+
While `ResponsiveTable` provides built-in plugins for common functionalities like sorting and filtering, its extensible plugin system allows you to create custom plugins for highly specific needs, such as a bespoke row selection mechanism. This guide outlines the steps to build and integrate your own row selection plugin.
|
|
395
|
+
|
|
396
|
+
**Step 1: Define Your Plugin Class**
|
|
397
|
+
|
|
398
|
+
Create a new TypeScript class that implements the `IResponsiveTablePlugin<TData>` interface. This interface defines the lifecycle methods and hooks your plugin can use to interact with the table.
|
|
399
|
+
|
|
400
|
+
```typescript
|
|
401
|
+
// my-custom-selection-plugin.ts
|
|
402
|
+
import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin'; // Adjust path as needed
|
|
403
|
+
import styles from './ResponsiveTable.module.css'; // For styling selected rows
|
|
404
|
+
|
|
405
|
+
export class MyCustomSelectionPlugin<TData> implements IResponsiveTablePlugin<TData> {
|
|
406
|
+
public id = 'my-custom-selection'; // A unique ID for your plugin
|
|
407
|
+
private api!: IPluginAPI<TData>;
|
|
408
|
+
private selectedRowIds = new Set<string | number>(); // Internal state for selected items
|
|
409
|
+
|
|
410
|
+
// Constructor can accept options for your plugin
|
|
411
|
+
constructor(options?: { initialSelection?: TData[]; rowIdKey: keyof TData }) {
|
|
412
|
+
// Initialize internal state based on options
|
|
413
|
+
if (options?.initialSelection && options.rowIdKey) {
|
|
414
|
+
options.initialSelection.forEach(item =>
|
|
415
|
+
this.selectedRowIds.add(item[options.rowIdKey] as string | number)
|
|
416
|
+
);
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
// Called by the table to provide the plugin with its API
|
|
421
|
+
public onPluginInit = (api: IPluginAPI<TData>) => {
|
|
422
|
+
this.api = api;
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
// Helper to get a unique ID for a row
|
|
426
|
+
private getRowId = (row: TData): string | number => {
|
|
427
|
+
// Assuming rowIdKey is passed in constructor options or via plugin API
|
|
428
|
+
const rowIdKey = (this as any).options.rowIdKey; // Access options from constructor
|
|
429
|
+
return row[rowIdKey] as string | number;
|
|
430
|
+
};
|
|
431
|
+
|
|
432
|
+
// Handles row clicks to toggle selection
|
|
433
|
+
private handleRowClick = (row: TData) => {
|
|
434
|
+
const rowId = this.getRowId(row);
|
|
435
|
+
if (this.selectedRowIds.has(rowId)) {
|
|
436
|
+
this.selectedRowIds.delete(rowId);
|
|
437
|
+
} else {
|
|
438
|
+
this.selectedRowIds.add(rowId);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
// Notify the table to re-render to reflect selection changes
|
|
442
|
+
this.api.forceUpdate();
|
|
443
|
+
|
|
444
|
+
// If you need to expose the selection to the parent component,
|
|
445
|
+
// you would typically call a callback provided via plugin options.
|
|
446
|
+
// e.g., (this as any).options.onSelectionChange(this.getSelectedItems());
|
|
447
|
+
};
|
|
448
|
+
|
|
449
|
+
// Provides props to be spread on each table row (<tr>)
|
|
450
|
+
public getRowProps = (row: TData): React.HTMLAttributes<HTMLTableRowElement> => {
|
|
451
|
+
const isSelected = this.selectedRowIds.has(this.getRowId(row));
|
|
452
|
+
return {
|
|
453
|
+
className: isSelected ? styles.selectedRow : '', // Apply selection styling
|
|
454
|
+
onClick: () => this.handleRowClick(row), // Attach click handler
|
|
455
|
+
'aria-selected': isSelected, // For accessibility
|
|
456
|
+
};
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
// Optional: You can also implement renderHeader, renderFooter, processData, etc.
|
|
460
|
+
// For example, to add a "Select All" checkbox in the header:
|
|
461
|
+
// public renderHeader = () => {
|
|
462
|
+
// return (
|
|
463
|
+
// <input
|
|
464
|
+
// type="checkbox"
|
|
465
|
+
// checked={this.selectedRowIds.size === this.api.getData().length}
|
|
466
|
+
// onChange={() => this.toggleSelectAll()}
|
|
467
|
+
// />
|
|
468
|
+
// );
|
|
469
|
+
// };
|
|
470
|
+
}
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
**Step 2: Integrate Your Custom Plugin**
|
|
474
|
+
|
|
475
|
+
Once your plugin class is defined, you can instantiate it and pass it to the `ResponsiveTable` component via the `plugins` prop.
|
|
476
|
+
|
|
477
|
+
```jsx
|
|
478
|
+
import React from 'react';
|
|
479
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
480
|
+
import { MyCustomSelectionPlugin } from './my-custom-selection-plugin'; // Adjust path
|
|
481
|
+
|
|
482
|
+
interface MyDataItem {
|
|
483
|
+
id: string;
|
|
484
|
+
name: string;
|
|
485
|
+
// ... other properties
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
const MyTableWithCustomSelection = () => {
|
|
489
|
+
const data: MyDataItem[] = [
|
|
490
|
+
{ id: '1', name: 'Alice' },
|
|
491
|
+
{ id: '2', name: 'Bob' },
|
|
492
|
+
// ...
|
|
493
|
+
];
|
|
494
|
+
|
|
495
|
+
const columns = [
|
|
496
|
+
{ displayLabel: 'ID', cellRenderer: (row: MyDataItem) => row.id },
|
|
497
|
+
{ displayLabel: 'Name', cellRenderer: (row: MyDataItem) => row.name },
|
|
498
|
+
];
|
|
499
|
+
|
|
500
|
+
// Instantiate your custom plugin, passing any necessary options
|
|
501
|
+
const customSelectionPlugin = new MyCustomSelectionPlugin<MyDataItem>({
|
|
502
|
+
rowIdKey: 'id', // Crucial for identifying rows
|
|
503
|
+
// onSelectionChange: (selectedItems) => console.log(selectedItems),
|
|
504
|
+
});
|
|
505
|
+
|
|
506
|
+
return (
|
|
507
|
+
<ResponsiveTable
|
|
508
|
+
columnDefinitions={columns}
|
|
509
|
+
data={data}
|
|
510
|
+
plugins={[customSelectionPlugin]} // Pass your custom plugin here
|
|
511
|
+
/>
|
|
512
|
+
);
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
export default MyTableWithCustomSelection;
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
### Built-in Plugins
|
|
519
|
+
|
|
520
|
+
#### `SortPlugin`
|
|
521
|
+
|
|
522
|
+
The `SortPlugin` provides powerful, type-safe, and highly customizable column sorting. It adds intuitive UI cues, allowing users to click column headers to sort the data in ascending, descending, or original order.
|
|
523
|
+
|
|
524
|
+
**Enabling the `SortPlugin`:**
|
|
525
|
+
|
|
526
|
+
To use the plugin, you must first import it and provide a generic instance of it to the `plugins` prop. The real power comes from making the plugin instance generic with your data type, which provides type-safety and IDE autocompletion for the sort comparer helpers.
|
|
527
|
+
|
|
528
|
+
```jsx
|
|
529
|
+
import React from 'react';
|
|
530
|
+
import ResponsiveTable, { IResponsiveTableColumnDefinition, SortPlugin } from 'jattac.libs.web.responsive-table';
|
|
531
|
+
|
|
532
|
+
// Define the shape of your data
|
|
533
|
+
interface User {
|
|
534
|
+
id: number;
|
|
535
|
+
name: string;
|
|
536
|
+
signupDate: string;
|
|
537
|
+
logins: number;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
// 1. Create a single, generic instance of the plugin.
|
|
541
|
+
const sortPlugin = new SortPlugin<User>({
|
|
542
|
+
initialSortColumn: 'user_logins', // Use the columnId
|
|
543
|
+
initialSortDirection: 'desc',
|
|
544
|
+
});
|
|
545
|
+
|
|
546
|
+
// 2. Define the columns, using the helpers directly from the plugin instance.
|
|
547
|
+
const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
|
|
548
|
+
// ... see examples below
|
|
549
|
+
];
|
|
550
|
+
|
|
551
|
+
const UserTable = ({ users }) => (
|
|
552
|
+
<ResponsiveTable
|
|
553
|
+
columnDefinitions={columnDefinitions}
|
|
554
|
+
data={users}
|
|
555
|
+
// 3. Pass the already-configured plugin to the table.
|
|
556
|
+
plugins={[sortPlugin]}
|
|
557
|
+
/>
|
|
558
|
+
);
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
**How to Make Columns Sortable (Opt-In):**
|
|
562
|
+
|
|
563
|
+
A column is made sortable by adding a **`columnId`** and either a `sortComparer` or a `getSortableValue` property to its definition. The `columnId` must be a unique string that identifies the column.
|
|
564
|
+
|
|
565
|
+
- `sortComparer`: A function that defines the exact comparison logic. This is the most powerful option and should be used for complex data types or custom logic.
|
|
566
|
+
- `getSortableValue`: A simpler function that just returns the primitive value (string, number, etc.) to be used in a default comparison.
|
|
567
|
+
|
|
568
|
+
**Example 1: Using Type-Safe Comparer Helpers**
|
|
569
|
+
|
|
570
|
+
The `SortPlugin` instance provides a `comparers` object with pre-built, type-safe helper functions to eliminate boilerplate for common sorting scenarios. This is the recommended approach.
|
|
571
|
+
|
|
572
|
+
```jsx
|
|
573
|
+
const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
|
|
574
|
+
{
|
|
575
|
+
columnId: 'user_name',
|
|
576
|
+
displayLabel: 'Name',
|
|
577
|
+
dataKey: 'name',
|
|
578
|
+
cellRenderer: (user) => user.name,
|
|
579
|
+
// The plugin instance itself provides the type-safe helpers.
|
|
580
|
+
// The string 'name' is fully type-checked against the User interface.
|
|
581
|
+
sortComparer: sortPlugin.comparers.caseInsensitiveString('name'),
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
columnId: 'user_signup_date',
|
|
585
|
+
displayLabel: 'Signup Date',
|
|
586
|
+
dataKey: 'signupDate',
|
|
587
|
+
cellRenderer: (user) => new Date(user.signupDate).toLocaleDateString(),
|
|
588
|
+
// IDE autocompletion for 'signupDate' works perfectly.
|
|
589
|
+
sortComparer: sortPlugin.comparers.date('signupDate'),
|
|
590
|
+
},
|
|
591
|
+
{
|
|
592
|
+
columnId: 'user_logins',
|
|
593
|
+
displayLabel: 'Logins',
|
|
594
|
+
dataKey: 'logins',
|
|
595
|
+
cellRenderer: (user) => user.logins,
|
|
596
|
+
sortComparer: sortPlugin.comparers.numeric('logins'),
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
columnId: 'user_actions',
|
|
600
|
+
displayLabel: 'Actions',
|
|
601
|
+
// This column is NOT sortable because it has no sort-related properties.
|
|
602
|
+
cellRenderer: (user) => <button>View</button>,
|
|
603
|
+
},
|
|
604
|
+
];
|
|
605
|
+
```
|
|
606
|
+
|
|
607
|
+
**Example 2: Writing a Custom `sortComparer` for a Computed Column**
|
|
608
|
+
|
|
609
|
+
> **Important:** When writing a custom `sortComparer`, you **must** include all three parameters (`a`, `b`, and `direction`) in your function signature. Forgetting the `direction` parameter will cause descending sorts to fail. The IDE is configured to provide a warning if you forget, and the developer console will also show a warning at runtime.
|
|
610
|
+
|
|
611
|
+
For unique requirements, you can write your own comparison function. Notice how `columnId` is used without a `dataKey`.
|
|
612
|
+
|
|
613
|
+
```jsx
|
|
614
|
+
const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
|
|
615
|
+
{
|
|
616
|
+
columnId: 'user_name_custom',
|
|
617
|
+
displayLabel: 'Name',
|
|
618
|
+
cellRenderer: (user) => user.name,
|
|
619
|
+
// Writing custom logic for a case-sensitive sort
|
|
620
|
+
sortComparer: (a, b, direction) => {
|
|
621
|
+
const nameA = a.name; // No .toLowerCase()
|
|
622
|
+
const nameB = b.name;
|
|
623
|
+
if (nameA < nameB) return direction === 'asc' ? -1 : 1;
|
|
624
|
+
if (nameA > nameB) return direction === 'asc' ? 1 : -1;
|
|
625
|
+
return 0;
|
|
626
|
+
},
|
|
627
|
+
},
|
|
628
|
+
];
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
**Example 3: Using `getSortableValue` for Simple Cases**
|
|
632
|
+
|
|
633
|
+
If you don't need special logic, `getSortableValue` is a concise way to enable default sorting on a property.
|
|
634
|
+
|
|
635
|
+
```jsx
|
|
636
|
+
const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
|
|
637
|
+
{
|
|
638
|
+
columnId: 'user_logins_simple',
|
|
639
|
+
displayLabel: 'Logins',
|
|
640
|
+
dataKey: 'logins',
|
|
641
|
+
cellRenderer: (user) => user.logins,
|
|
642
|
+
// This enables a simple, default numerical sort on the 'logins' property.
|
|
643
|
+
getSortableValue: (user) => user.logins,
|
|
644
|
+
},
|
|
645
|
+
];
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
**Plugin Options (via `new SortPlugin(options)`):**
|
|
649
|
+
|
|
650
|
+
| Prop | Type | Description |
|
|
651
|
+
| ---------------------- | ----------------- | ---------------------------------------------------- |
|
|
652
|
+
| `initialSortColumn` | `string` | The `columnId` of the column to sort by initially. |
|
|
653
|
+
| `initialSortDirection` | `'asc' \| 'desc'` | The direction for the initial sort. |
|
|
654
|
+
|
|
655
|
+
**`SortPlugin.comparers` API:**
|
|
656
|
+
|
|
657
|
+
The `comparers` object on your `SortPlugin` instance provides the following helper methods. Each method is a factory that takes a `dataKey` (which is type-checked against your data model) and returns a `sortComparer` function.
|
|
658
|
+
|
|
659
|
+
| Method | Description |
|
|
660
|
+
| -------------------------------- | ----------------------------------------------------------------------------- |
|
|
661
|
+
| `numeric(dataKey)` | Performs a standard numerical sort. |
|
|
662
|
+
| `caseInsensitiveString(dataKey)` | Performs a case-insensitive alphabetical sort. |
|
|
663
|
+
| `date(dataKey)` | Correctly sorts dates, assuming the data is a valid date string or timestamp. |
|
|
664
|
+
|
|
665
|
+
#### `FilterPlugin`
|
|
666
|
+
|
|
667
|
+
> **Warning: Incompatible with Infinite Scroll**
|
|
668
|
+
> The `FilterPlugin` is a client-side utility that only operates on data currently loaded in the browser. It is **not compatible** with the `InfiniteScrollPlugin`, as it cannot search data that has not yet been fetched from the server. For tables using infinite scroll, filtering logic must be implemented server-side by your application and passed into the `onLoadMore` function.
|
|
669
|
+
|
|
670
|
+
Provides a search input to filter table data. It can be enabled by setting `filterProps.showFilter` to `true` on the `ResponsiveTable` component. For columns to be filterable, you must provide a `getFilterableValue` function in their `IResponsiveTableColumnDefinition`.
|
|
671
|
+
|
|
672
|
+
**Props for `FilterPlugin` (via `filterProps` on `ResponsiveTable`):**
|
|
673
|
+
|
|
674
|
+
| Prop | Type | Description |
|
|
675
|
+
| ------------------- | --------- | --------------------------------------------------------------- |
|
|
676
|
+
| `showFilter` | `boolean` | If `true`, displays a filter input field above the table. |
|
|
677
|
+
| `filterPlaceholder` | `string` | Placeholder text for the filter input. Defaults to "Search...". |
|
|
678
|
+
|
|
679
|
+
**Example with `FilterPlugin`:**
|
|
680
|
+
|
|
681
|
+
```jsx
|
|
682
|
+
import React from 'react';
|
|
683
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
684
|
+
|
|
685
|
+
const FilterableTable = () => {
|
|
686
|
+
const initialData = [
|
|
687
|
+
{ id: 1, name: 'Alice', email: 'alice@example.com' },
|
|
688
|
+
{ id: 2, name: 'Bob', email: 'bob@example.com' },
|
|
689
|
+
{ id: 3, name: 'Charlie', email: 'charlie@example.com' },
|
|
690
|
+
{ id: 4, name: 'David', email: 'david@example.com' },
|
|
691
|
+
];
|
|
692
|
+
|
|
693
|
+
const columns = [
|
|
694
|
+
{ displayLabel: 'ID', cellRenderer: (row) => row.id, getFilterableValue: (row) => row.id.toString() },
|
|
695
|
+
{ displayLabel: 'Name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
|
|
696
|
+
{ displayLabel: 'Email', cellRenderer: (row) => row.email, getFilterableValue: (row) => row.email },
|
|
697
|
+
];
|
|
698
|
+
|
|
699
|
+
return (
|
|
700
|
+
<ResponsiveTable
|
|
701
|
+
columnDefinitions={columns}
|
|
702
|
+
data={initialData}
|
|
703
|
+
filterProps={{ showFilter: true, filterPlaceholder: 'Filter users...' }}
|
|
704
|
+
/>
|
|
705
|
+
);
|
|
706
|
+
};
|
|
707
|
+
```
|
|
708
|
+
|
|
709
|
+
#### Infinite Scroll
|
|
710
|
+
|
|
711
|
+
> **Warning: Incompatible with Client-Side Filtering**
|
|
712
|
+
> The infinite scroll feature fetches data in chunks from a server. It is **not compatible** with the client-side `FilterPlugin`. For filtering to work correctly with infinite scroll, you must implement the filtering logic on your server and have the `onLoadMore` function fetch data that is already filtered.
|
|
713
|
+
|
|
714
|
+
Enables a simple infinite scroll for loading more data as the user scrolls to the bottom of the table. This is useful for progressively loading data from an API without needing traditional pagination buttons. When enabled, the `ResponsiveTable` renders a specialized internal component optimized for this purpose.
|
|
715
|
+
|
|
716
|
+
> **Important:** To enable infinite scroll, you **must** give the table a bounded height. This is done by passing the `maxHeight` prop to the `<ResponsiveTable>`. This prop creates a scrollable container for the table body, which is required for the scroll detection to work.
|
|
717
|
+
|
|
718
|
+
> **Performance Note:** This implementation renders all loaded rows into the DOM to guarantee correct column alignment and simplicity. It is **not a virtualized list**. For extremely large datasets (many thousands of rows), performance may degrade as more rows are loaded. It is best suited for scenarios where loading a few hundred up to a couple thousand rows is expected.
|
|
719
|
+
|
|
720
|
+
**Configuration (via `infiniteScrollProps` on `ResponsiveTable`):**
|
|
721
|
+
|
|
722
|
+
| Prop | Type | Description |
|
|
723
|
+
| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
724
|
+
|
|
725
|
+
| `hasMore` | `boolean` | **Optional.** Controls the loading indicator. If omitted, the component infers this state automatically by checking if `onLoadMore` returns an empty array or `null`. If provided, your app is responsible for managing this state. |
|
|
726
|
+
| `onLoadMore` | `(currentData: TData[]) => Promise<TData[] | null>` | A callback function that fires when the user scrolls near the end. It should fetch the next page of data and return it in a Promise. The component will stop trying to load more when this function returns `null` or an empty array. |
|
|
727
|
+
| `loadingMoreComponent` | `ReactNode` | A custom component to display at the bottom while new data is being loaded. Defaults to a spinner animation. |
|
|
728
|
+
| `noMoreDataComponent` | `ReactNode` | A custom component to display at the bottom when `hasMore` is `false`. Defaults to a "No more data" message. |
|
|
729
|
+
|
|
730
|
+
**Comprehensive Example:**
|
|
731
|
+
|
|
732
|
+
Here is a complete example showing how to use the infinite scroll feature. The parent component only needs to provide a function that fetches the next page of data.
|
|
733
|
+
|
|
734
|
+
```jsx
|
|
735
|
+
import React, { useState, useCallback } from 'react';
|
|
736
|
+
import ResponsiveTable from 'jattac.libs.web.responsive-table';
|
|
737
|
+
|
|
738
|
+
// Define the shape of our data items
|
|
739
|
+
interface DataItem {
|
|
740
|
+
id: number;
|
|
741
|
+
value: string;
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
// This is a mock API function to simulate fetching data.
|
|
745
|
+
// In a real app, this would be an actual network request.
|
|
746
|
+
const fetchData = async (page: number): Promise<DataItem[]> => {
|
|
747
|
+
console.log(`Fetching page: ${page}`);
|
|
748
|
+
return new Promise((resolve) => {
|
|
749
|
+
setTimeout(() => {
|
|
750
|
+
// Return an empty array for pages > 5 to simulate the end of the data
|
|
751
|
+
if (page > 5) {
|
|
752
|
+
resolve([]);
|
|
753
|
+
return;
|
|
754
|
+
}
|
|
755
|
+
// Generate 20 new items for the current page
|
|
756
|
+
const newData = Array.from({ length: 20 }, (_, i) => ({
|
|
757
|
+
id: page * 20 + i,
|
|
758
|
+
value: `Item #${page * 20 + i}`,
|
|
759
|
+
}));
|
|
760
|
+
resolve(newData);
|
|
761
|
+
}, 500); // Simulate network latency
|
|
762
|
+
});
|
|
763
|
+
};
|
|
764
|
+
|
|
765
|
+
const InfiniteScrollExample = () => {
|
|
766
|
+
// Keep track of the next page to fetch.
|
|
767
|
+
const [nextPage, setNextPage] = useState(0);
|
|
768
|
+
|
|
769
|
+
// The onLoadMore function is now much simpler.
|
|
770
|
+
// It just needs to fetch the data and return it.
|
|
771
|
+
// The table will handle appending the data and managing the `hasMore` state internally.
|
|
772
|
+
const loadMoreItems = useCallback(async () => {
|
|
773
|
+
const newItems = await fetchData(nextPage);
|
|
774
|
+
setNextPage((prevPage) => prevPage + 1);
|
|
775
|
+
return newItems; // <-- Simply return the new items
|
|
776
|
+
}, [nextPage]);
|
|
777
|
+
|
|
778
|
+
const columns = [
|
|
779
|
+
{ displayLabel: 'ID', dataKey: 'id', cellRenderer: (row) => row.id },
|
|
780
|
+
{ displayLabel: 'Value', dataKey: 'value', cellRenderer: (row) => row.value },
|
|
781
|
+
];
|
|
782
|
+
|
|
783
|
+
return (
|
|
784
|
+
// The table MUST be inside a container with a defined height.
|
|
785
|
+
<div style={{ height: '400px' }}>
|
|
786
|
+
<ResponsiveTable
|
|
787
|
+
columnDefinitions={columns}
|
|
788
|
+
data={[]} // Start with an empty array of initial data
|
|
789
|
+
maxHeight="100%"
|
|
790
|
+
infiniteScrollProps={{
|
|
791
|
+
onLoadMore: loadMoreItems,
|
|
792
|
+
|
|
793
|
+
loadingMoreComponent: <h4>Loading more items...</h4>,
|
|
794
|
+
noMoreDataComponent: <p>You've reached the end!</p>,
|
|
795
|
+
}}
|
|
796
|
+
/>
|
|
797
|
+
</div>
|
|
798
|
+
);
|
|
799
|
+
};
|
|
800
|
+
```
|
|
801
|
+
|
|
802
|
+
---
|
|
803
|
+
|
|
804
|
+
## API Reference
|
|
805
|
+
|
|
806
|
+
### `ResponsiveTable` Props
|
|
807
|
+
|
|
808
|
+
| Prop | Type | Required | Description |
|
|
809
|
+
| ----------------------------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
|
|
810
|
+
| `columnDefinitions` | `IResponsiveTableColumnDefinition[]` | Yes | An array of objects defining the table columns. Can also accept a function for dynamic column generation. |
|
|
811
|
+
| `data` | `TData[]` | Yes | An array of data objects to populate the table rows. |
|
|
812
|
+
| `footerRows` | `IFooterRowDefinition[]` | No | An array of objects defining the table footer. |
|
|
813
|
+
| `onRowClick` | `(item: TData) => void` | No | A callback function that is triggered when a row is clicked. |
|
|
814
|
+
| `noDataComponent` | `ReactNode` | No | A custom component to display when there is no data. |
|
|
815
|
+
| `maxHeight` | `string` | No | Sets a maximum height for the table body, making it scrollable. |
|
|
816
|
+
| `mobileBreakpoint` | `number` | No | The pixel width at which the table switches to the mobile view. Defaults to `600`. |
|
|
817
|
+
| `enablePageLevelStickyHeader` | `boolean` | No | If `false`, disables the header from sticking to the top of the page on scroll. Defaults to `true`. |
|
|
818
|
+
| `plugins` | `IResponsiveTablePlugin<TData>[]` | No | An array of plugin instances to extend table functionality. |
|
|
819
|
+
| `infiniteScrollProps` | `object` | No | Configuration for the infinite scroll feature. When enabled, a specialized component handles data loading. |
|
|
820
|
+
| `filterProps` | `object` | No | Configuration for the built-in filter plugin. |
|
|
821
|
+
| `animationProps` | `object` | No | Configuration for animations, including `isLoading` and `animateOnLoad`. |
|
|
822
|
+
|
|
823
|
+
### `IResponsiveTableColumnDefinition<TData>`
|
|
824
|
+
|
|
825
|
+
| Property | Type | Required | Description |
|
|
826
|
+
| -------------------- | ------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------- |
|
|
827
|
+
| `displayLabel` | `ReactNode` | Yes | The label displayed in the table header (can be a string or any React component). |
|
|
828
|
+
| `cellRenderer` | `(row: TData) => ReactNode` | Yes | A function that returns the content to be rendered in the cell. |
|
|
829
|
+
| `columnId` | `string` | No | A unique string to identify the column. **Required** if the column is sortable. |
|
|
830
|
+
| `dataKey` | `keyof TData` | No | A key to match the column to a property in the data object. |
|
|
831
|
+
| `interactivity` | `object` | No | An object to define header interactivity (`onHeaderClick`, `id`, `className`). |
|
|
832
|
+
| `getFilterableValue` | `(row: TData) => string \| number` | No | A function that returns the string or number value to be used for filtering this column. |
|
|
833
|
+
| `getSortableValue` | `(row: TData) => any` | No | A function that returns a primitive value from a row to be used for default sorting. |
|
|
834
|
+
| `sortComparer` | `(a: TData, b: TData, direction: 'asc' \| 'desc') => number` | No | A function that provides the precise comparison logic for sorting a column. |
|
|
835
|
+
|
|
836
|
+
### `IFooterRowDefinition`
|
|
837
|
+
|
|
838
|
+
| Property | Type | Required | Description |
|
|
839
|
+
| --------- | --------------------------- | -------- | -------------------------------------------------- |
|
|
840
|
+
| `columns` | `IFooterColumnDefinition[]` | Yes | An array of column definitions for the footer row. |
|
|
841
|
+
|
|
842
|
+
### `IFooterColumnDefinition`
|
|
843
|
+
|
|
844
|
+
| Property | Type | Required | Description |
|
|
845
|
+
| -------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
846
|
+
| `colSpan` | `number` | Yes | The number of columns the footer cell should span. |
|
|
847
|
+
| `cellRenderer` | `() => ReactNode` | Yes | A function that returns the content for the footer cell. |
|
|
848
|
+
| `displayLabel` | `ReactNode` | No | An optional, explicit label for the footer cell. In mobile view, if `colSpan` is 1 and this is not provided, the corresponding column header will be used as a fallback. This is required for `colSpan` > 1 if you want a label to be displayed. |
|
|
849
|
+
| `onCellClick` | `() => void` | No | An optional click handler for the footer cell. |
|
|
850
|
+
| `className` | `string` | No | Optional class name for custom styling of the footer cell. |
|
|
851
|
+
|
|
852
|
+
---
|
|
853
|
+
|
|
854
|
+
## Breaking Changes
|
|
855
|
+
|
|
856
|
+
### Version 0.5.0
|
|
857
|
+
|
|
858
|
+
**Change:** The API for `infiniteScrollProps` has been simplified.
|
|
859
|
+
|
|
860
|
+
**Details:**
|
|
861
|
+
The `enableInfiniteScroll: true` property has been removed. The infinite scroll feature is now automatically enabled whenever the `infiniteScrollProps` object is provided. Additionally, the `onLoadMore` function is now a required property on `infiniteScrollProps`.
|
|
862
|
+
|
|
863
|
+
**Reason:**
|
|
864
|
+
This change removes unnecessary boilerplate and makes the API more intuitive. If you provide props for infinite scrolling, it's clear you intend to use it.
|
|
865
|
+
|
|
866
|
+
**Migration:**
|
|
867
|
+
To update your code, remove the `enableInfiniteScroll` property from your `infiniteScrollProps` object.
|
|
868
|
+
|
|
869
|
+
**Before:**
|
|
870
|
+
```jsx
|
|
871
|
+
<ResponsiveTable
|
|
872
|
+
// ...
|
|
873
|
+
infiniteScrollProps={{
|
|
874
|
+
enableInfiniteScroll: true, // <-- No longer needed
|
|
875
|
+
onLoadMore: loadMoreItems,
|
|
876
|
+
}}
|
|
877
|
+
/>
|
|
878
|
+
```
|
|
879
|
+
|
|
880
|
+
**After:**
|
|
881
|
+
```jsx
|
|
882
|
+
<ResponsiveTable
|
|
883
|
+
// ...
|
|
884
|
+
infiniteScrollProps={{
|
|
885
|
+
onLoadMore: loadMoreItems, // <-- Now required
|
|
886
|
+
}}
|
|
887
|
+
/>
|
|
888
|
+
```
|
|
889
|
+
|
|
890
|
+
---
|
|
891
|
+
|
|
892
|
+
## License
|
|
893
|
+
|
|
894
|
+
This project is licensed under the MIT License.
|