jattac.libs.web.responsive-table 0.2.4 → 0.2.5
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 +68 -62
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
# ResponsiveTable: A Modern and Flexible React Table Component
|
|
2
2
|
|
|
3
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
4
|
|
|
@@ -82,7 +82,9 @@ const AnimatedTable = () => {
|
|
|
82
82
|
}, 2000);
|
|
83
83
|
}, []);
|
|
84
84
|
|
|
85
|
-
return
|
|
85
|
+
return (
|
|
86
|
+
<ResponsiveTable columnDefinitions={columns} data={data} animationProps={{ isLoading, animateOnLoad: true }} />
|
|
87
|
+
);
|
|
86
88
|
};
|
|
87
89
|
```
|
|
88
90
|
|
|
@@ -258,9 +260,7 @@ const NonStickyHeaderTable = () => {
|
|
|
258
260
|
|
|
259
261
|
return (
|
|
260
262
|
<div>
|
|
261
|
-
<h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>
|
|
262
|
-
Scroll down to see the table
|
|
263
|
-
</h1>
|
|
263
|
+
<h1 style={{ height: '50vh', display: 'flex', alignItems: 'center' }}>Scroll down to see the table</h1>
|
|
264
264
|
<ResponsiveTable
|
|
265
265
|
columnDefinitions={columns}
|
|
266
266
|
data={data}
|
|
@@ -290,7 +290,12 @@ import ResponsiveTable, { FilterPlugin } from 'jattac.libs.web.responsive-table'
|
|
|
290
290
|
const MyTableWithPlugins = () => {
|
|
291
291
|
const columns = [
|
|
292
292
|
{ displayLabel: 'Name', dataKey: 'name', cellRenderer: (row) => row.name, getFilterableValue: (row) => row.name },
|
|
293
|
-
{
|
|
293
|
+
{
|
|
294
|
+
displayLabel: 'Age',
|
|
295
|
+
dataKey: 'age',
|
|
296
|
+
cellRenderer: (row) => row.age,
|
|
297
|
+
getFilterableValue: (row) => row.age.toString(),
|
|
298
|
+
},
|
|
294
299
|
];
|
|
295
300
|
|
|
296
301
|
const data = [
|
|
@@ -304,7 +309,7 @@ const MyTableWithPlugins = () => {
|
|
|
304
309
|
columnDefinitions={columns}
|
|
305
310
|
data={data}
|
|
306
311
|
// Enable built-in filter plugin via props
|
|
307
|
-
filterProps={{ showFilter: true, filterPlaceholder:
|
|
312
|
+
filterProps={{ showFilter: true, filterPlaceholder: 'Search by name or age...' }}
|
|
308
313
|
// Or provide a custom instance of the plugin
|
|
309
314
|
// plugins={[new FilterPlugin()]}
|
|
310
315
|
/>
|
|
@@ -360,8 +365,8 @@ const UserTable = ({ users }) => (
|
|
|
360
365
|
|
|
361
366
|
A column is made sortable by adding either a `sortComparer` or a `getSortableValue` property to its definition.
|
|
362
367
|
|
|
363
|
-
|
|
364
|
-
|
|
368
|
+
- `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.
|
|
369
|
+
- `getSortableValue`: A simpler function that just returns the primitive value (string, number, etc.) to be used in a default comparison.
|
|
365
370
|
|
|
366
371
|
**Example 1: Using Type-Safe Comparer Helpers**
|
|
367
372
|
|
|
@@ -438,20 +443,20 @@ const columnDefinitions: IResponsiveTableColumnDefinition<User>[] = [
|
|
|
438
443
|
|
|
439
444
|
**Plugin Options (via `new SortPlugin(options)`):**
|
|
440
445
|
|
|
441
|
-
| Prop
|
|
442
|
-
|
|
|
443
|
-
| `initialSortColumn`
|
|
444
|
-
| `initialSortDirection
|
|
446
|
+
| Prop | Type (`keyof TData`) | Description |
|
|
447
|
+
| ---------------------- | -------------------- | ------------------------------------------------- |
|
|
448
|
+
| `initialSortColumn` | `string` | The `dataKey` of the column to sort by initially. |
|
|
449
|
+
| `initialSortDirection` | `'asc' \| 'desc'` | The direction for the initial sort. |
|
|
445
450
|
|
|
446
451
|
**`SortPlugin.comparers` API:**
|
|
447
452
|
|
|
448
453
|
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.
|
|
449
454
|
|
|
450
|
-
| Method
|
|
451
|
-
|
|
|
452
|
-
| `numeric(dataKey)`
|
|
453
|
-
| `caseInsensitiveString(dataKey)` | Performs a case-insensitive alphabetical sort.
|
|
454
|
-
| `date(dataKey)`
|
|
455
|
+
| Method | Description |
|
|
456
|
+
| -------------------------------- | ----------------------------------------------------------------------------- |
|
|
457
|
+
| `numeric(dataKey)` | Performs a standard numerical sort. |
|
|
458
|
+
| `caseInsensitiveString(dataKey)` | Performs a case-insensitive alphabetical sort. |
|
|
459
|
+
| `date(dataKey)` | Correctly sorts dates, assuming the data is a valid date string or timestamp. |
|
|
455
460
|
|
|
456
461
|
#### `FilterPlugin`
|
|
457
462
|
|
|
@@ -459,10 +464,10 @@ Provides a search input to filter table data. It can be enabled by setting `filt
|
|
|
459
464
|
|
|
460
465
|
**Props for `FilterPlugin` (via `filterProps` on `ResponsiveTable`):**
|
|
461
466
|
|
|
462
|
-
| Prop
|
|
463
|
-
|
|
|
464
|
-
| `showFilter`
|
|
465
|
-
| `filterPlaceholder
|
|
467
|
+
| Prop | Type | Description |
|
|
468
|
+
| ------------------- | --------- | --------------------------------------------------------------- |
|
|
469
|
+
| `showFilter` | `boolean` | If `true`, displays a filter input field above the table. |
|
|
470
|
+
| `filterPlaceholder` | `string` | Placeholder text for the filter input. Defaults to "Search...". |
|
|
466
471
|
|
|
467
472
|
**Example with `FilterPlugin`:**
|
|
468
473
|
|
|
@@ -488,7 +493,7 @@ const FilterableTable = () => {
|
|
|
488
493
|
<ResponsiveTable
|
|
489
494
|
columnDefinitions={columns}
|
|
490
495
|
data={initialData}
|
|
491
|
-
filterProps={{ showFilter: true, filterPlaceholder:
|
|
496
|
+
filterProps={{ showFilter: true, filterPlaceholder: 'Filter users...' }}
|
|
492
497
|
/>
|
|
493
498
|
);
|
|
494
499
|
};
|
|
@@ -500,13 +505,13 @@ Enables infinite scrolling for the table, loading more data as the user scrolls
|
|
|
500
505
|
|
|
501
506
|
**Props for `InfiniteScrollPlugin` (via `infiniteScrollProps` on `ResponsiveTable`):**
|
|
502
507
|
|
|
503
|
-
| Prop
|
|
504
|
-
|
|
|
505
|
-
| `enableInfiniteScroll
|
|
506
|
-
| `onLoadMore`
|
|
507
|
-
| `hasMore`
|
|
508
|
-
| `loadingMoreComponent
|
|
509
|
-
| `noMoreDataComponent`
|
|
508
|
+
| Prop | Type | Description |
|
|
509
|
+
| ---------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
510
|
+
| `enableInfiniteScroll` | `boolean` | If `true`, enables infinite scrolling. |
|
|
511
|
+
| `onLoadMore` | `(currentData: TData[]) => Promise<TData[] | null>` | Callback function to load more data. Should return a Promise resolving to new data or `null`. |
|
|
512
|
+
| `hasMore` | `boolean` | Indicates if there is more data to load. |
|
|
513
|
+
| `loadingMoreComponent` | `ReactNode` | Custom component to display while loading more data. Defaults to "Loading more...". |
|
|
514
|
+
| `noMoreDataComponent` | `ReactNode` | Custom component to display when no more data is available. Defaults to "No more data.". |
|
|
510
515
|
|
|
511
516
|
**Example with `InfiniteScrollPlugin`:**
|
|
512
517
|
|
|
@@ -533,7 +538,7 @@ const InfiniteScrollTable = () => {
|
|
|
533
538
|
};
|
|
534
539
|
|
|
535
540
|
useEffect(() => {
|
|
536
|
-
fetchData(0).then(initialData => {
|
|
541
|
+
fetchData(0).then((initialData) => {
|
|
537
542
|
setData(initialData);
|
|
538
543
|
setPage(1);
|
|
539
544
|
});
|
|
@@ -558,7 +563,9 @@ const InfiniteScrollTable = () => {
|
|
|
558
563
|
];
|
|
559
564
|
|
|
560
565
|
return (
|
|
561
|
-
<div style={{ height: '300px' }}>
|
|
566
|
+
<div style={{ height: '300px' }}>
|
|
567
|
+
{' '}
|
|
568
|
+
{/* Container for scrollable table */}
|
|
562
569
|
<ResponsiveTable
|
|
563
570
|
columnDefinitions={columns}
|
|
564
571
|
data={data}
|
|
@@ -582,32 +589,32 @@ const InfiniteScrollTable = () => {
|
|
|
582
589
|
|
|
583
590
|
### `ResponsiveTable` Props
|
|
584
591
|
|
|
585
|
-
| Prop | Type | Required | Description
|
|
586
|
-
| ----------------------------- | ------------------------------------ | -------- |
|
|
587
|
-
| `columnDefinitions` | `IResponsiveTableColumnDefinition[]` | Yes | An array of objects defining the table columns.
|
|
588
|
-
| `data` | `TData[]` | Yes | An array of data objects to populate the table rows.
|
|
589
|
-
| `footerRows` | `IFooterRowDefinition[]` | No | An array of objects defining the table footer.
|
|
590
|
-
| `onRowClick` | `(item: TData) => void` | No | A callback function that is triggered when a row is clicked.
|
|
591
|
-
| `noDataComponent` | `ReactNode` | No | A custom component to display when there is no data.
|
|
592
|
-
| `maxHeight` | `string` | No | Sets a maximum height for the table body, making it scrollable.
|
|
593
|
-
| `mobileBreakpoint` | `number` | No | The pixel width at which the table switches to the mobile view. Defaults to `600`.
|
|
594
|
-
| `enablePageLevelStickyHeader` | `boolean` | No | If `false`, disables the header from sticking to the top of the page on scroll. Defaults to `true`.
|
|
595
|
-
| `plugins` | `IResponsiveTablePlugin<TData>[]` | No | An array of plugin instances to extend table functionality.
|
|
596
|
-
| `infiniteScrollProps` | `object` | No | Configuration for the built-in infinite scroll plugin.
|
|
597
|
-
| `filterProps` | `object` | No | Configuration for the built-in filter plugin.
|
|
598
|
-
| `animationProps` | `object` | No | Configuration for animations, including `isLoading` and `animateOnLoad`.
|
|
592
|
+
| Prop | Type | Required | Description |
|
|
593
|
+
| ----------------------------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
|
|
594
|
+
| `columnDefinitions` | `IResponsiveTableColumnDefinition[]` | Yes | An array of objects defining the table columns. |
|
|
595
|
+
| `data` | `TData[]` | Yes | An array of data objects to populate the table rows. |
|
|
596
|
+
| `footerRows` | `IFooterRowDefinition[]` | No | An array of objects defining the table footer. |
|
|
597
|
+
| `onRowClick` | `(item: TData) => void` | No | A callback function that is triggered when a row is clicked. |
|
|
598
|
+
| `noDataComponent` | `ReactNode` | No | A custom component to display when there is no data. |
|
|
599
|
+
| `maxHeight` | `string` | No | Sets a maximum height for the table body, making it scrollable. |
|
|
600
|
+
| `mobileBreakpoint` | `number` | No | The pixel width at which the table switches to the mobile view. Defaults to `600`. |
|
|
601
|
+
| `enablePageLevelStickyHeader` | `boolean` | No | If `false`, disables the header from sticking to the top of the page on scroll. Defaults to `true`. |
|
|
602
|
+
| `plugins` | `IResponsiveTablePlugin<TData>[]` | No | An array of plugin instances to extend table functionality. |
|
|
603
|
+
| `infiniteScrollProps` | `object` | No | Configuration for the built-in infinite scroll plugin. |
|
|
604
|
+
| `filterProps` | `object` | No | Configuration for the built-in filter plugin. |
|
|
605
|
+
| `animationProps` | `object` | No | Configuration for animations, including `isLoading` and `animateOnLoad`. |
|
|
599
606
|
|
|
600
607
|
### `IResponsiveTableColumnDefinition<TData>`
|
|
601
608
|
|
|
602
|
-
| Property
|
|
603
|
-
|
|
|
604
|
-
| `displayLabel`
|
|
605
|
-
| `cellRenderer`
|
|
606
|
-
| `dataKey`
|
|
607
|
-
| `interactivity`
|
|
608
|
-
| `getFilterableValue
|
|
609
|
-
| `getSortableValue
|
|
610
|
-
| `sortComparer`
|
|
609
|
+
| Property | Type | Required | Description |
|
|
610
|
+
| -------------------- | ------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------- |
|
|
611
|
+
| `displayLabel` | `ReactNode` | Yes | The label displayed in the table header (can be a string or any React component). |
|
|
612
|
+
| `cellRenderer` | `(row: TData) => ReactNode` | Yes | A function that returns the content to be rendered in the cell. |
|
|
613
|
+
| `dataKey` | `string` | No | A key to match the column to a property in the data object (required for sorting). |
|
|
614
|
+
| `interactivity` | `object` | No | An object to define header interactivity (`onHeaderClick`, `id`, `className`). |
|
|
615
|
+
| `getFilterableValue` | `(row: TData) => string \| number` | No | A function that returns the string or number value to be used for filtering this column. |
|
|
616
|
+
| `getSortableValue` | `(row: TData) => any` | No | A function that returns a primitive value from a row to be used for default sorting. |
|
|
617
|
+
| `sortComparer` | `(a: TData, b: TData, direction: 'asc' \| 'desc') => number` | No | A function that provides the precise comparison logic for sorting a column. |
|
|
611
618
|
|
|
612
619
|
### `IFooterRowDefinition`
|
|
613
620
|
|
|
@@ -617,15 +624,14 @@ const InfiniteScrollTable = () => {
|
|
|
617
624
|
|
|
618
625
|
### `IFooterColumnDefinition`
|
|
619
626
|
|
|
620
|
-
| Property | Type | Required | Description
|
|
621
|
-
| -------------- | ----------------- | -------- |
|
|
622
|
-
| `colSpan` | `number` | Yes | The number of columns the footer cell should span.
|
|
623
|
-
| `cellRenderer` | `() => ReactNode` | Yes | A function that returns the content for the footer cell.
|
|
627
|
+
| Property | Type | Required | Description |
|
|
628
|
+
| -------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
629
|
+
| `colSpan` | `number` | Yes | The number of columns the footer cell should span. |
|
|
630
|
+
| `cellRenderer` | `() => ReactNode` | Yes | A function that returns the content for the footer cell. |
|
|
624
631
|
| `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. |
|
|
625
|
-
| `onCellClick` | `() => void` | No | An optional click handler for the footer cell.
|
|
626
|
-
| `className` | `string` | No | Optional class name for custom styling of the footer cell.
|
|
632
|
+
| `onCellClick` | `() => void` | No | An optional click handler for the footer cell. |
|
|
633
|
+
| `className` | `string` | No | Optional class name for custom styling of the footer cell. |
|
|
627
634
|
|
|
628
635
|
## License
|
|
629
636
|
|
|
630
637
|
This project is licensed under the MIT License.
|
|
631
|
-
''
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jattac.libs.web.responsive-table",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "A fully responsive, customizable, and lightweight React table component with a modern, mobile-first design and a powerful plugin system.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -63,4 +63,4 @@
|
|
|
63
63
|
"react-window": "^1.8.11",
|
|
64
64
|
"tslib": "^2.6.2"
|
|
65
65
|
}
|
|
66
|
-
}
|
|
66
|
+
}
|