HRnet Table – React Component

💼 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.

✨ Features

• 🔍 Global search across all fields
• ⬇️ Sortable columns
• 📄 Pagination
• 🖱️ Row highlight on hover
• ♻️ Lightweight and customizable
• 🚀 Built with modern React

📦 Installation

To install the package, run the following command:

npm install react-hrnet-table

Peer Dependencies

Ensure you have the following peer dependencies installed in your project:

• React: ^17.0.0 || ^18.0.0
• react-dom: ^17.0.0 || ^18.0.0

You can install them using:

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.

🚀 Usage

Here’s an example of how to use the HRnetTable component:

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 <HRnetTable data={employees} />;
}

export default App;

🧩 Props

| Prop | Type | Required | Description | |-------|--------|----------|-----------------------------------------------| | data | Array | ✅ | Array of employee objects to display in the table |

Each employee object must contain the following fields:

• firstName
• lastName
• startDate
• department
• dateOfBirth
• street
• city
• state
• zipCode

📚 Technologies

This project uses the following technologies:

• React: ^17.0.0 || ^18.0.0
• react-dom: ^17.0.0 || ^18.0.0
• react-data-table-component: ^7.7.0
• Babel: ^7.27.0 (for transpilation)

📁 Repository

Find the source code on GitHub: HRnet Table Repository

🐛 Bug Reports / Feature Requests

If you encounter any issues or have feature requests, please open an issue here: GitHub Issues

🔑 Keywords

• React Table
• HRnet
• Data Table
• Pagination
• Sorting
• Searchable Table
• Employee Management
• React Component

📜 License

This project is licensed under the MIT License. © @SaidMohamedDayas