snap-records 1.1.8 → 1.1.10
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 +37 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,27 +5,27 @@
|
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
<a href="https://www.npmjs.com/package/snap-records"
|
|
9
|
-
<a href="https://github.com/lbassuncao/SnapRecords/blob/main/LICENSE"
|
|
10
|
-
<a href="https://github.com/lbassuncao/SnapRecords/actions/workflows/ci.yml"
|
|
8
|
+
<a href="https://www.npmjs.com/package/snap-records"><img src="https://img.shields.io/npm/v/snap-records.svg?style=flat-square&color=007acc" alt="NPM Version"></a>
|
|
9
|
+
<a href="https://github.com/lbassuncao/SnapRecords/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/snap-records.svg?style=flat-square&color=007acc" alt="License"></a>
|
|
10
|
+
<a href="https://github.com/lbassuncao/SnapRecords/actions/workflows/ci.yml"><img src="https://github.com/lbassuncao/SnapRecords/actions/workflows/ci.yml/badge.svg" alt="Build Status"></a>
|
|
11
11
|
</p>
|
|
12
12
|
|
|
13
13
|
<br>
|
|
14
14
|
|
|
15
15
|
<p align="center" style="font-size: 1.15rem">
|
|
16
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/CONFIG.md"
|
|
17
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/BUILD.md"
|
|
18
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/KEYBOARD.md"
|
|
19
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/CONTRIBUTING.md"
|
|
20
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/LICENSE"
|
|
21
|
-
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/COC.md"
|
|
16
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/CONFIG.md">Configuration</a></strong> |
|
|
17
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/BUILD.md">Build Guide</a></strong> |
|
|
18
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/KEYBOARD.md">Keyboard Navigation</a></strong> |
|
|
19
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/CONTRIBUTING.md">Contributing</a></strong> |
|
|
20
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/LICENSE">License</a></strong> |
|
|
21
|
+
<strong><a href="https://github.com/lbassuncao/SnapRecords/blob/main/docs/COC.md">Code of Conduct</a></strong>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
24
|
<br>
|
|
25
25
|
|
|
26
26
|
**SnapRecords** is a powerful, flexible TypeScript-based data grid component for displaying, managing, and interacting with tabular data in web applications.
|
|
27
27
|
|
|
28
|
-
Inspired by
|
|
28
|
+
Inspired by [jQuery Dynatable](https://github.com/alfajango/jquery-dynatable), it modernizes the concept with type safety, enhanced features, and performance optimizations.
|
|
29
29
|
|
|
30
30
|
It supports server-side pagination, sorting, filtering, caching, multiple rendering modes, and accessibility, making it ideal for both simple and complex data-driven interfaces.
|
|
31
31
|
|
|
@@ -47,22 +47,30 @@ It supports server-side pagination, sorting, filtering, caching, multiple render
|
|
|
47
47
|
|
|
48
48
|
To quickly set up SnapRecords:
|
|
49
49
|
|
|
50
|
-
1. Install
|
|
50
|
+
1. **Install via NPM**:
|
|
51
51
|
```bash
|
|
52
|
-
npm install
|
|
52
|
+
npm install snap-records
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
2. **Include Styles**:
|
|
56
|
+
If using a bundler (Vite, Webpack, etc.):
|
|
57
|
+
```typescript
|
|
58
|
+
import 'snap-records/dist/snap-records.css';
|
|
53
59
|
```
|
|
54
|
-
|
|
60
|
+
Or via HTML:
|
|
55
61
|
```html
|
|
56
|
-
<link rel="stylesheet" href="/
|
|
62
|
+
<link rel="stylesheet" href="/node_modules/snap-records/dist/snap-records.css" />
|
|
57
63
|
```
|
|
58
|
-
|
|
64
|
+
|
|
65
|
+
3. **Create a container**:
|
|
59
66
|
```html
|
|
60
67
|
<div id="table-container"></div>
|
|
61
68
|
```
|
|
62
|
-
|
|
69
|
+
|
|
70
|
+
4. **Initialize SnapRecords**:
|
|
63
71
|
|
|
64
72
|
```typescript
|
|
65
|
-
import { SnapRecords, RowsPerPage } from '
|
|
73
|
+
import { SnapRecords, RowsPerPage } from 'snap-records';
|
|
66
74
|
|
|
67
75
|
new SnapRecords('table-container', {
|
|
68
76
|
url: 'https://api.example.com/data',
|
|
@@ -74,6 +82,12 @@ To quickly set up SnapRecords:
|
|
|
74
82
|
|
|
75
83
|
## Installation
|
|
76
84
|
|
|
85
|
+
### NPM (Recommended)
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm install snap-records
|
|
89
|
+
```
|
|
90
|
+
|
|
77
91
|
### Prerequisites
|
|
78
92
|
|
|
79
93
|
- Node.js (version 20 or higher)
|
|
@@ -141,7 +155,7 @@ npm install dexie immer lru-cache
|
|
|
141
155
|
A minimal setup with a table displaying user data:
|
|
142
156
|
|
|
143
157
|
```typescript
|
|
144
|
-
import { SnapRecords, RowsPerPage } from '
|
|
158
|
+
import { SnapRecords, RowsPerPage } from 'snap-records';
|
|
145
159
|
|
|
146
160
|
const snapRecords = new SnapRecords('table-container', {
|
|
147
161
|
url: '/api/users',
|
|
@@ -156,7 +170,7 @@ const snapRecords = new SnapRecords('table-container', {
|
|
|
156
170
|
Enabling row selection, custom formatting, and disabling sorting on a column:
|
|
157
171
|
|
|
158
172
|
```typescript
|
|
159
|
-
import { SnapRecords, RenderType, RowsPerPage } from '
|
|
173
|
+
import { SnapRecords, RenderType, RowsPerPage } from 'snap-records';
|
|
160
174
|
|
|
161
175
|
const snapRecords = new SnapRecords('table-container', {
|
|
162
176
|
url: '/api/users',
|
|
@@ -179,7 +193,7 @@ console.log(api.getSelectedRows());
|
|
|
179
193
|
Using all available options:
|
|
180
194
|
|
|
181
195
|
```typescript
|
|
182
|
-
import { SnapRecords, RenderType, RowsPerPage } from '
|
|
196
|
+
import { SnapRecords, RenderType, RowsPerPage } from 'snap-records';
|
|
183
197
|
|
|
184
198
|
const snapRecords = new SnapRecords('table-container', {
|
|
185
199
|
url: 'https://api.example.com/data',
|
|
@@ -234,7 +248,7 @@ api.setRenderMode(RenderType.MOBILE_CARDS);
|
|
|
234
248
|
|
|
235
249
|
## Configuration Options
|
|
236
250
|
|
|
237
|
-
The `SnapRecordsOptions<T>` interface defines all configuration options. Key options include (see
|
|
251
|
+
The `SnapRecordsOptions<T>` interface defines all configuration options. Key options include (see [config.md](https://github.com/lbassuncao/SnapRecords/blob/main/docs/CONFIG.md) for full details):
|
|
238
252
|
|
|
239
253
|
- `url` (string, required): API URL for data fetching.
|
|
240
254
|
- `columns` (string[], required): Column keys to display.
|
|
@@ -311,7 +325,7 @@ Override styles in your CSS as needed.
|
|
|
311
325
|
SnapRecords prioritizes accessibility:
|
|
312
326
|
|
|
313
327
|
- **ARIA Attributes**: Supports `aria-sort`, `aria-selected`, `aria-label` for table, list, and card modes.
|
|
314
|
-
- **Keyboard Navigation**: ArrowUp/Down for row navigation, Enter/Space for selection, PageUp/Down for pagination (see
|
|
328
|
+
- **Keyboard Navigation**: ArrowUp/Down for row navigation, Enter/Space for selection, PageUp/Down for pagination (see [keyboard.md](https://github.com/lbassuncao/SnapRecords/blob/main/docs/KEYBOARD.md)).
|
|
315
329
|
- **Screen Reader Support**: Announces updates (e.g., row selection, mode changes) via ARIA live regions.
|
|
316
330
|
|
|
317
331
|
## State Management
|
|
@@ -464,7 +478,7 @@ Customize rendering or event handling by providing custom `renderer`, `eventMana
|
|
|
464
478
|
|
|
465
479
|
## License
|
|
466
480
|
|
|
467
|
-
MIT License. See
|
|
481
|
+
MIT License. See [LICENSE](https://github.com/lbassuncao/SnapRecords/blob/main/LICENSE) for details.
|
|
468
482
|
|
|
469
483
|
## Support
|
|
470
484
|
|