react-hrnet-table-gandrica 1.0.5 → 1.0.7

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.
Files changed (2) hide show
  1. package/README.md +64 -61
  2. package/package.json +20 -13
package/README.md CHANGED
@@ -15,8 +15,9 @@ This plugin features its own isolated Redux state management to avoid conflicts
15
15
 
16
16
  To use this plugin, your project must have the following installed:
17
17
 
18
- - **Node.js**: v16.0.0 or higher
19
- - **React & ReactDOM**: v18.0.0 or higher
18
+ - **VSCode** -code editor(optional)
19
+ - **Node.js**: v16.0.0 or higher - Required as peer dependencies.
20
+ - **React & ReactDOM**: v18.0.0 or higher - Required as peer dependencies.
20
21
  - **Redux Toolkit & React-Redux**: Required as peer dependencies.
21
22
 
22
23
  ## 🛠️ Installation
@@ -31,68 +32,70 @@ npm install react-hrnet-table-gandrica
31
32
 
32
33
  1. import { Table } from 'react-hrnet-table-gandrica';
33
34
  2. import "react-hrnet-table-gandrica/style.css"; // Don't forget the styles!
34
- 3. Pass the list and tableHeaders as props
35
- 4. Ex: //<Table list={list} tableHeaders={tableHeaders}/>
35
+ 3. Pass the list and tableHeaders as props Ex: `<Table list={list} tableHeaders={tableHeaders}/>`
36
+
37
+ ```jsx
38
+ import Table from "react-hrnet-table-gandrica";
36
39
 
37
40
  export default function EmployeeList() {
38
- // 1. The list array
39
- const employeeList = [
40
- {
41
- firstName: "John",
42
- lastName: "Doe",
43
- startDate: "2022-01-01",
44
- department: "Sales",
45
- birthDate: "1990-01-01",
46
- street: "123 Main St",
47
- city: "New York",
48
- state: "NY",
49
- zipCode: "10001",
50
- },
51
- {
52
- firstName: "Jane",
53
- lastName: "Smith",
54
- startDate: "2022-01-01",
55
- department: "Marketing",
56
- birthDate: "1995-01-01",
57
- street: "456 Oak Ave",
58
- city: "Los Angeles",
59
- state: "CA",
60
- zipCode: "90210",
61
- },
62
- {
63
- firstName: "Michael",
64
- lastName: "Johnson",
65
- startDate: "2022-01-01",
66
- department: "Engineering",
67
- birthDate: "1985-01-01",
68
- street: "789 Elm St",
69
- city: "Chicago",
70
- state: "IL",
71
- zipCode: "60601",
72
- },
73
- ];
74
-
75
- // 2. The columns configuration ("First Name" = Header, firstName = data key)
76
- const columns = [
77
- { firstName: "First Name" },
78
- { lastName: "Last Name" },
79
- { startDate: "Start Date" },
80
- { department: "Department" },
81
- { birthDate: "Date of Birth" },
82
- { street: "Street" },
83
- { city: "City" },
84
- { state: "State" },
85
- { zipCode: "Zip Code" },
86
- ];
87
-
88
- return (
89
-
90
- <div className="table-wrapper">
91
- <h2>Current Employees</h2>
92
- <Table tableHeaders="{columns}" list="{employeeList}"/>
93
- </div>
94
- );
41
+ // 1. The list array
42
+ const employeeList = [
43
+ {
44
+ firstName: "John",
45
+ lastName: "Doe",
46
+ startDate: "2022-01-01",
47
+ department: "Sales",
48
+ birthDate: "1990-01-01",
49
+ street: "123 Main St",
50
+ city: "New York",
51
+ state: "NY",
52
+ zipCode: "10001",
53
+ },
54
+ {
55
+ firstName: "Jane",
56
+ lastName: "Smith",
57
+ startDate: "2022-01-01",
58
+ department: "Marketing",
59
+ birthDate: "1995-01-01",
60
+ street: "456 Oak Ave",
61
+ city: "Los Angeles",
62
+ state: "CA",
63
+ zipCode: "90210",
64
+ },
65
+ {
66
+ firstName: "Michael",
67
+ lastName: "Johnson",
68
+ startDate: "2022-01-01",
69
+ department: "Engineering",
70
+ birthDate: "1985-01-01",
71
+ street: "789 Elm St",
72
+ city: "Chicago",
73
+ state: "IL",
74
+ zipCode: "60601",
75
+ },
76
+ ];
77
+
78
+ // 2. The columns configuration ("First Name" = Header, firstName = data key)
79
+ const columns = [
80
+ { firstName: "First Name" },
81
+ { lastName: "Last Name" },
82
+ { startDate: "Start Date" },
83
+ { department: "Department" },
84
+ { birthDate: "Date of Birth" },
85
+ { street: "Street" },
86
+ { city: "City" },
87
+ { state: "State" },
88
+ { zipCode: "Zip Code" },
89
+ ];
90
+
91
+ return (
92
+ <div className="table-wrapper">
93
+ <h2>Current Employees</h2>
94
+ <Table tableHeaders="{columns}" list="{employeeList}" />
95
+ </div>
96
+ );
95
97
  }
98
+ ```
96
99
 
97
100
  🎛️ Props Reference
98
101
  Prop Name : tableHeaders
package/package.json CHANGED
@@ -1,6 +1,17 @@
1
1
  {
2
2
  "name": "react-hrnet-table-gandrica",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
+ "description": "A lightweight and functional React data table component with internal Redux state, built for the HRNet application.",
5
+ "author": "Gabriel ANDRICA",
6
+ "keywords": [
7
+ "react",
8
+ "datatable",
9
+ "table",
10
+ "hrnet",
11
+ "openclassrooms",
12
+ "pagination",
13
+ "sort"
14
+ ],
4
15
  "private": false,
5
16
  "type": "module",
6
17
  "main": "dist/react-hrnet-table.umd.js",
@@ -20,24 +31,17 @@
20
31
  "dev": "vite",
21
32
  "build": "vite build",
22
33
  "lint": "eslint .",
23
- "preview": "vite preview",
24
- "test": "vitest"
34
+ "preview": "vite preview"
25
35
  },
26
36
  "peerDependencies": {
37
+ "@reduxjs/toolkit": "^1.9.0 || ^2.0.0",
27
38
  "react": "^18.2.0 || ^19.0.0",
28
39
  "react-dom": "^18.2.0 || ^19.0.0",
29
- "@reduxjs/toolkit": "^1.9.0 || ^2.0.0",
30
40
  "react-redux": "^8.0.0 || ^9.0.0"
31
41
  },
32
42
  "devDependencies": {
33
- "@reduxjs/toolkit": "^2.12.0",
34
- "react": "^19.2.8",
35
- "react-dom": "^19.2.8",
36
- "react-redux": "^9.3.0",
37
- "sass": "^1.102.0",
38
43
  "@eslint/js": "^10.0.1",
39
- "@testing-library/jest-dom": "^7.0.1",
40
- "@testing-library/react": "^16.3.2",
44
+ "@reduxjs/toolkit": "^2.12.0",
41
45
  "@types/react": "^19.2.17",
42
46
  "@types/react-dom": "^19.2.3",
43
47
  "@vitejs/plugin-react": "^6.0.4",
@@ -46,7 +50,10 @@
46
50
  "eslint-plugin-react-refresh": "^0.5.3",
47
51
  "globals": "^17.7.0",
48
52
  "jsdom": "^29.1.1",
49
- "vite": "^8.2.0",
50
- "vitest": "^4.1.10"
53
+ "react": "^19.2.8",
54
+ "react-dom": "^19.2.8",
55
+ "react-redux": "^9.3.0",
56
+ "sass": "^1.102.0",
57
+ "vite": "^8.2.0"
51
58
  }
52
59
  }