react-hrnet-table-gandrica 1.0.6 → 1.0.8
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 +4 -3
- package/dist/react-hrnet-table.es.js +6 -10
- package/dist/react-hrnet-table.umd.js +1 -1
- package/package.json +21 -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
|
-
- **
|
|
19
|
-
- **
|
|
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
|
|
@@ -90,7 +91,7 @@ export default function EmployeeList() {
|
|
|
90
91
|
return (
|
|
91
92
|
<div className="table-wrapper">
|
|
92
93
|
<h2>Current Employees</h2>
|
|
93
|
-
<Table tableHeaders=
|
|
94
|
+
<Table tableHeaders={columns} list={employeeList} />
|
|
94
95
|
</div>
|
|
95
96
|
);
|
|
96
97
|
}
|
|
@@ -8,9 +8,9 @@ var l = (e, t) => t ? e.filter((e) => Object.values(e).map((e) => e.toString().t
|
|
|
8
8
|
return r < i ? t.direction === "asc" ? -1 : 1 : r > i ? t.direction === "asc" ? 1 : -1 : 0;
|
|
9
9
|
}) : e, d = (e, t, n) => {
|
|
10
10
|
if (!Array.isArray(e)) return [];
|
|
11
|
-
let r = Math.max(0, (t - 1) * n), i = Math.min(r + n, e.length)
|
|
12
|
-
return
|
|
13
|
-
slice:
|
|
11
|
+
let r = Math.max(0, (t - 1) * n), i = Math.min(r + n, e.length);
|
|
12
|
+
return {
|
|
13
|
+
slice: e.slice(r, i),
|
|
14
14
|
startIndex: r,
|
|
15
15
|
endIndex: i
|
|
16
16
|
};
|
|
@@ -39,14 +39,10 @@ var l = (e, t) => t ? e.filter((e) => Object.values(e).map((e) => e.toString().t
|
|
|
39
39
|
e.searchResult = "", e.currentPage = 1, e.entriesPerPage = t.payload, e.listSliced = d(e.currentList, e.currentPage, e.entriesPerPage), e.listToDisplay = e.listSliced.slice;
|
|
40
40
|
},
|
|
41
41
|
setSortConfig: (e, t) => {
|
|
42
|
-
e.sortConfig = t.payload, e.
|
|
42
|
+
e.sortConfig = t.payload, e.currentList = u(e.currentList, t.payload), e.listSliced = d(e.currentList, e.currentPage, e.entriesPerPage), e.listToDisplay = e.listSliced.slice;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
}), { setList: p, setSearchResult: m, setCurrentPage: h, setEntriesPerPage: g, setSortConfig: _ } = f.actions, v = f.reducer, y = r({ reducer: { table: v } });
|
|
46
|
-
y.subscribe(() => {
|
|
47
|
-
console.log("State updated:", y.getState());
|
|
48
|
-
});
|
|
49
|
-
var b = { entriesControl: "_entriesControl_h5mt7_2" };
|
|
45
|
+
}), { setList: p, setSearchResult: m, setCurrentPage: h, setEntriesPerPage: g, setSortConfig: _ } = f.actions, v = f.reducer, y = r({ reducer: { table: v } }), b = { entriesControl: "_entriesControl_h5mt7_2" };
|
|
50
46
|
//#endregion
|
|
51
47
|
//#region src/components/entries/Entries.jsx
|
|
52
48
|
function x() {
|
|
@@ -202,7 +198,7 @@ function j() {
|
|
|
202
198
|
/* @__PURE__ */ o("span", { children: i }),
|
|
203
199
|
/* @__PURE__ */ o("button", {
|
|
204
200
|
onClick: () => {
|
|
205
|
-
|
|
201
|
+
a !== c && e(h(i + 1));
|
|
206
202
|
},
|
|
207
203
|
children: "Next"
|
|
208
204
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react-redux"),require("@reduxjs/toolkit"),require("react/jsx-runtime"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`react-redux`,`@reduxjs/toolkit`,`react/jsx-runtime`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactHrnetTable={},e.ReactRedux,e.ReduxToolkit,e.react_jsx_runtime,e.React))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=(e,t)=>t?e.filter(e=>Object.values(e).map(e=>e.toString().toLowerCase()).some(e=>e.includes(t.toLowerCase()))):e,o=(e,t)=>t?.key?[...e].sort((e,n)=>{let r=e[t.key],i=n[t.key];return r<i?t.direction===`asc`?-1:1:r>i?t.direction===`asc`?1:-1:0}):e,s=(e,t,n)=>{if(!Array.isArray(e))return[];let r=Math.max(0,(t-1)*n),i=Math.min(r+n,e.length)
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react-redux"),require("@reduxjs/toolkit"),require("react/jsx-runtime"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`react-redux`,`@reduxjs/toolkit`,`react/jsx-runtime`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactHrnetTable={},e.ReactRedux,e.ReduxToolkit,e.react_jsx_runtime,e.React))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=(e,t)=>t?e.filter(e=>Object.values(e).map(e=>e.toString().toLowerCase()).some(e=>e.includes(t.toLowerCase()))):e,o=(e,t)=>t?.key?[...e].sort((e,n)=>{let r=e[t.key],i=n[t.key];return r<i?t.direction===`asc`?-1:1:r>i?t.direction===`asc`?1:-1:0}):e,s=(e,t,n)=>{if(!Array.isArray(e))return[];let r=Math.max(0,(t-1)*n),i=Math.min(r+n,e.length);return{slice:e.slice(r,i),startIndex:r,endIndex:i}},c=(0,n.createSlice)({name:`table`,initialState:{searchResult:``,currentPage:1,entriesPerPage:10,sortConfig:{key:null,direction:`asc`}},reducers:{setList:(e,t)=>{e.initialList=t.payload.list,e.tableHeaders=t.payload.tableHeaders,e.currentList=e.initialList,e.listSliced=s(e.currentList,e.currentPage,e.entriesPerPage),e.listToDisplay=e.listSliced.slice},setSearchResult:(e,t)=>{e.searchResult=t.payload,e.currentPage=1,e.currentList=a(e.initialList,t.payload),e.listSliced=s(e.currentList,e.currentPage,e.entriesPerPage),e.listToDisplay=e.listSliced.slice},setCurrentPage:(e,t)=>{e.currentPage=t.payload,e.listSliced=s(e.currentList,e.currentPage,e.entriesPerPage),e.listToDisplay=e.listSliced.slice},setEntriesPerPage:(e,t)=>{e.searchResult=``,e.currentPage=1,e.entriesPerPage=t.payload,e.listSliced=s(e.currentList,e.currentPage,e.entriesPerPage),e.listToDisplay=e.listSliced.slice},setSortConfig:(e,t)=>{e.sortConfig=t.payload,e.currentList=o(e.currentList,t.payload),e.listSliced=s(e.currentList,e.currentPage,e.entriesPerPage),e.listToDisplay=e.listSliced.slice}}}),{setList:l,setSearchResult:u,setCurrentPage:d,setEntriesPerPage:f,setSortConfig:p}=c.actions,m=c.reducer,h=(0,n.configureStore)({reducer:{table:m}}),g={entriesControl:`_entriesControl_h5mt7_2`};function _(){let e=(0,t.useDispatch)(),n=(0,t.useSelector)(e=>e.table.entriesPerPage)||10;return(0,r.jsx)(`div`,{className:g.entriesControl,children:(0,r.jsxs)(`label`,{children:[`Show`,(0,r.jsxs)(`select`,{name:`table-entries`,id:`table-entries`,value:n,onChange:t=>{e(f(Number(t.target.value)))},children:[(0,r.jsx)(`option`,{value:`10`,children:`10`}),(0,r.jsx)(`option`,{value:`25`,children:`25`}),(0,r.jsx)(`option`,{value:`50`,children:`50`}),(0,r.jsx)(`option`,{value:`100`,children:`100`})]}),`entries`]})})}function v(){let[e,n]=(0,i.useState)(``),a=(0,t.useDispatch)();return(0,r.jsxs)(`label`,{children:[`Search:`,` `,(0,r.jsx)(`input`,{type:`search`,value:e,onChange:e=>{n(e.target.value),a(u(e.target.value))},"aria-controls":`employee-table`})]})}var y={cellHeader:`_cellHeader_mvi5q_1`,sortIcon:`_sortIcon_mvi5q_5`,sortArrows:`_sortArrows_mvi5q_15`};function b({header:e}){let n=(0,t.useDispatch)(),i=(0,t.useSelector)(e=>e.table.sortConfig),a=Object.keys(e)[0],o=e[a],s=()=>{let e=`asc`;i?.key===a&&(e=i.direction===`asc`?`desc`:`asc`),n(p({key:a,direction:e}))},c=i?.key===a,l=c&&i.direction===`asc`,u=c&&i.direction===`desc`;return(0,r.jsxs)(`th`,{className:y.cellHeader,onClick:s,children:[(0,r.jsx)(`span`,{children:o}),(0,r.jsxs)(`span`,{className:y.sortIcon,children:[(0,r.jsx)(`span`,{className:y.sortArrows,style:{opacity:l?1:.3,color:`#6366f1`},children:`▲`}),(0,r.jsx)(`span`,{className:y.sortArrows,style:{opacity:u?1:.3,color:`#6366f1`},children:`▼`})]})]})}function x(){let e=(0,t.useSelector)(e=>e.table.tableHeaders);return(0,r.jsx)(`thead`,{children:(0,r.jsx)(`tr`,{children:e.map((e,t)=>(0,r.jsx)(b,{header:e},t))})})}function S(){let e=(0,t.useSelector)(e=>e.table.listToDisplay);return(0,r.jsx)(`tbody`,{children:e.map((e,t)=>(0,r.jsxs)(`tr`,{children:[(0,r.jsx)(`td`,{children:e.firstName}),(0,r.jsx)(`td`,{children:e.lastName}),(0,r.jsx)(`td`,{children:e.startDate}),(0,r.jsx)(`td`,{children:e.department}),(0,r.jsx)(`td`,{children:e.birthDate}),(0,r.jsx)(`td`,{children:e.street}),(0,r.jsx)(`td`,{children:e.city}),(0,r.jsx)(`td`,{children:e.state}),(0,r.jsx)(`td`,{children:e.zipCode})]},t))})}var C={table:`_table_gudt1_1`};function w(){return(0,r.jsxs)(`table`,{className:C.table,children:[(0,r.jsx)(x,{}),(0,r.jsx)(S,{})]})}function T(){let e=(0,t.useSelector)(e=>e.table),n=e.listSliced.startIndex+1,i=e.listSliced.endIndex,a=e.currentList.length;return(0,r.jsxs)(`p`,{children:[`Showing `,n,` to `,i,` of `,a,` entries.`]})}var E={pagination:`_pagination_1kyfl_1`};function D(){let e=(0,t.useDispatch)(),n=(0,t.useSelector)(e=>e.table),i=n.currentPage,a=n.listSliced.endIndex,o=n.currentList.length;return(0,r.jsxs)(`div`,{className:E.pagination,children:[(0,r.jsx)(`button`,{onClick:()=>{i!==1&&e(d(i-1))},children:`Previous`}),(0,r.jsx)(`span`,{children:i}),(0,r.jsx)(`button`,{onClick:()=>{a!==o&&e(d(i+1))},children:`Next`})]})}var O={tableHeader:`_tableHeader_jg9ws_1`,tableFooter:`_tableFooter_jg9ws_2`};function k({list:e,tableHeaders:n}){return(0,t.useDispatch)()(l({list:e,tableHeaders:n})),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`div`,{className:O.tableHeader,children:[(0,r.jsx)(_,{}),(0,r.jsx)(v,{})]}),(0,r.jsx)(w,{}),(0,r.jsxs)(`div`,{className:O.tableFooter,children:[(0,r.jsx)(T,{}),(0,r.jsx)(D,{})]})]})}function A(e){return(0,r.jsx)(t.Provider,{store:h,children:(0,r.jsx)(k,{...e})})}e.Table=A});
|
package/package.json
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hrnet-table-gandrica",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
|
+
"description": "A lightweight and functional React data table component with internal Redux state, built for the HRNet application.",
|
|
5
|
+
"author": "Gabriel ANDRICA",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"react",
|
|
9
|
+
"datatable",
|
|
10
|
+
"table",
|
|
11
|
+
"hrnet",
|
|
12
|
+
"openclassrooms",
|
|
13
|
+
"pagination",
|
|
14
|
+
"sort"
|
|
15
|
+
],
|
|
4
16
|
"private": false,
|
|
5
17
|
"type": "module",
|
|
6
18
|
"main": "dist/react-hrnet-table.umd.js",
|
|
@@ -20,24 +32,17 @@
|
|
|
20
32
|
"dev": "vite",
|
|
21
33
|
"build": "vite build",
|
|
22
34
|
"lint": "eslint .",
|
|
23
|
-
"preview": "vite preview"
|
|
24
|
-
"test": "vitest"
|
|
35
|
+
"preview": "vite preview"
|
|
25
36
|
},
|
|
26
37
|
"peerDependencies": {
|
|
38
|
+
"@reduxjs/toolkit": "^1.9.0 || ^2.0.0",
|
|
27
39
|
"react": "^18.2.0 || ^19.0.0",
|
|
28
40
|
"react-dom": "^18.2.0 || ^19.0.0",
|
|
29
|
-
"@reduxjs/toolkit": "^1.9.0 || ^2.0.0",
|
|
30
41
|
"react-redux": "^8.0.0 || ^9.0.0"
|
|
31
42
|
},
|
|
32
43
|
"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
44
|
"@eslint/js": "^10.0.1",
|
|
39
|
-
"@
|
|
40
|
-
"@testing-library/react": "^16.3.2",
|
|
45
|
+
"@reduxjs/toolkit": "^2.12.0",
|
|
41
46
|
"@types/react": "^19.2.17",
|
|
42
47
|
"@types/react-dom": "^19.2.3",
|
|
43
48
|
"@vitejs/plugin-react": "^6.0.4",
|
|
@@ -46,7 +51,10 @@
|
|
|
46
51
|
"eslint-plugin-react-refresh": "^0.5.3",
|
|
47
52
|
"globals": "^17.7.0",
|
|
48
53
|
"jsdom": "^29.1.1",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
54
|
+
"react": "^19.2.8",
|
|
55
|
+
"react-dom": "^19.2.8",
|
|
56
|
+
"react-redux": "^9.3.0",
|
|
57
|
+
"sass": "^1.102.0",
|
|
58
|
+
"vite": "^8.2.0"
|
|
51
59
|
}
|
|
52
60
|
}
|