hrnet-datatable-tiago 1.0.0 → 1.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
CHANGED
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
# hrnet-datatable
|
|
2
2
|
|
|
3
|
-
A React datatable component with search, multi-column sort, and pagination. Built as part of the WealthHealth HRnet project (OpenClassrooms
|
|
3
|
+
A React datatable component with search, multi-column sort, and pagination. Built as part of the WealthHealth HRnet project (OpenClassrooms P14).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
+
This package is published on GitHub Packages. Create a `.npmrc` file in your project root (never commit it):
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
@tiagolima-7:registry=https://npm.pkg.github.com
|
|
11
|
+
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Then install:
|
|
15
|
+
|
|
7
16
|
```bash
|
|
8
|
-
npm install hrnet-datatable
|
|
17
|
+
npm install @tiagolima-7/hrnet-datatable
|
|
9
18
|
```
|
|
10
19
|
|
|
11
20
|
Requires React 18 or higher as a peer dependency.
|
|
@@ -13,7 +22,8 @@ Requires React 18 or higher as a peer dependency.
|
|
|
13
22
|
## Usage
|
|
14
23
|
|
|
15
24
|
```jsx
|
|
16
|
-
import { DataTable } from "hrnet-datatable";
|
|
25
|
+
import { DataTable } from "@tiagolima-7/hrnet-datatable";
|
|
26
|
+
import "@tiagolima-7/hrnet-datatable/dist/hrnet-datatable.css";
|
|
17
27
|
|
|
18
28
|
const columns = [
|
|
19
29
|
{ key: "firstName", label: "First Name" },
|
|
@@ -36,22 +46,21 @@ function EmployeeList({ employees }) {
|
|
|
36
46
|
|
|
37
47
|
### Column definition
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
- `label` — the column header text
|
|
49
|
+
| Field | Type | Description |
|
|
50
|
+
| ------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| `key` | `string` | Property name on each row object |
|
|
52
|
+
| `label` | `string` | Column header text |
|
|
53
|
+
| `type` | `"date"` \| `"string"` | Optional. Use `"date"` for MM/DD/YYYY columns — enables chronological sort instead of alphabetical |
|
|
45
54
|
|
|
46
55
|
## Features
|
|
47
56
|
|
|
48
|
-
**Search**
|
|
57
|
+
**Search** - filters across all columns simultaneously. Resets to page 1 on each keystroke.
|
|
49
58
|
|
|
50
|
-
**Multi-column sort**
|
|
59
|
+
**Multi-column sort** - click a column header to sort ascending, click again for descending, click a third time to remove that sort. When multiple columns are sorted, each header displays a priority number so the order is clear.
|
|
51
60
|
|
|
52
|
-
**Pagination**
|
|
61
|
+
**Pagination** - choose between 10, 25, 50, or 100 rows per page.
|
|
53
62
|
|
|
54
|
-
**Mobile card layout**
|
|
63
|
+
**Mobile card layout** - below 1024px the table switches to a card-per-row layout. A row of sort chips replaces the column headers so sorting stays accessible.
|
|
55
64
|
|
|
56
65
|
## Development
|
|
57
66
|
|
|
@@ -64,21 +73,3 @@ npm run test # run unit tests with Vitest
|
|
|
64
73
|
```
|
|
65
74
|
|
|
66
75
|
Unit tests cover: initial state, search/filter, sort cycle (asc → desc → removed), multi-column sort with priority ordering, clearSorts, and pagination.
|
|
67
|
-
|
|
68
|
-
## Local usage without npm publish
|
|
69
|
-
|
|
70
|
-
In a sibling React project, add a Vite alias to point directly at the source:
|
|
71
|
-
|
|
72
|
-
```js
|
|
73
|
-
// vite.config.js
|
|
74
|
-
import { resolve } from "path";
|
|
75
|
-
|
|
76
|
-
export default defineConfig({
|
|
77
|
-
resolve: {
|
|
78
|
-
alias: {
|
|
79
|
-
"hrnet-datatable": resolve(__dirname, "../hrnet-datatable/src/index.js"),
|
|
80
|
-
},
|
|
81
|
-
dedupe: ["react", "react-dom"],
|
|
82
|
-
},
|
|
83
|
-
});
|
|
84
|
-
```
|
package/package.json
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hrnet-datatable-tiago",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "React datatable component with search, multi-sort and pagination",
|
|
5
5
|
"main": "dist/hrnet-datatable.es.js",
|
|
6
6
|
"module": "dist/hrnet-datatable.es.js",
|
|
7
|
+
"style": "dist/hrnet-datatable.css",
|
|
7
8
|
"exports": {
|
|
8
9
|
".": {
|
|
9
10
|
"import": "./dist/hrnet-datatable.es.js",
|
|
10
11
|
"require": "./dist/hrnet-datatable.es.js"
|
|
11
|
-
}
|
|
12
|
+
},
|
|
13
|
+
"./dist/hrnet-datatable.css": "./dist/hrnet-datatable.css"
|
|
12
14
|
},
|
|
13
15
|
"files": [
|
|
14
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
15
18
|
],
|
|
16
19
|
"scripts": {
|
|
17
20
|
"dev": "vite",
|
|
File without changes
|