A React table component for HRnet that replaces the legacy jQuery DataTables plugin.
npm install react-hrnet-table💼 A modern React replacement for the legacy jQuery DataTables plugin used in the HRnet employee management system.
This component displays employee records in a searchable, sortable, and paginated table. It is built using react-data-table-component and is designed to integrate easily with the new React version of HRnet.
---
- 🔍 Global search across all fields
- ⬇️ Sortable columns
- 📄 Pagination
- 🖱️ Row highlight on hover
- ♻️ Lightweight and customizable
- 🚀 Built with modern React
---
To install the package, run the following command:
``bash`
npm install react-hrnet-table
Ensure you have the following peer dependencies installed in your project:
- React: ^17.0.0 || ^18.0.0
- react-dom:
You can install them using:
`bash`
npm install react react-dom
> Note: react and react-dom are listed as peer dependencies to ensure compatibility with your project's React version. Make sure they are installed in your project.
---
Here’s an example of how to use the HRnetTable component:
`jsx
import HRnetTable from 'react-hrnet-table';
const employees = [
{
firstName: "Alice",
lastName: "Smith",
startDate: "2023-01-01",
department: "Marketing",
dateOfBirth: "1990-05-10",
street: "123 Main St",
city: "New York",
state: "NY",
zipCode: "10001",
},
// More employees...
];
function App() {
return
}
export default App;
`
---
| Prop | Type | Required | Description |
|-------|--------|----------|-----------------------------------------------|
| data | Array | ✅ | Array of employee objects to display in the table |
Each employee object must contain the following fields:
- firstName
-
-
-
-
-
-
-
-
---
This project uses the following technologies:
- React: ^17.0.0 || ^18.0.0
- react-dom:
- react-data-table-component:
- Babel:
---
Find the source code on GitHub: HRnet Table Repository
---
If you encounter any issues or have feature requests, please open an issue here: GitHub Issues
---
- React Table
- HRnet
- Data Table
- Pagination
- Sorting
- Searchable Table
- Employee Management
- React Component
---
This project is licensed under the MIT License. © @SaidMohamedDayas