React HRNet DataTable

A modern, lightweight, and dependency-free (except React & Redux) data table component. Built as a purely functional React replacement for the legacy jQuery DataTables plugin. This plugin features its own isolated Redux state management to avoid conflicts with the host application.

🌟 Features

• Modular Architecture: Built with isolated functional components (TableSearch, TablePagination, TableCore).
• Internal State Management: Uses Redux Toolkit internally, wrapped in its own Provider.
• Smart Sorting & Filtering: Instantly search across all data or sort by specific column headers.
• Pagination: Automatically paginates data (10 rows per page).

📋 Prerequisites

To use this plugin, your project must have the following installed:

• VSCode -code editor(optional)
• Node.js: v16.0.0 or higher - Required as peer dependencies.
• React & ReactDOM: v18.0.0 or higher - Required as peer dependencies.
• Redux Toolkit & React-Redux: Required as peer dependencies.

🛠️ Installation

Run the following command in your terminal to install the package via NPM:

npm install react-hrnet-table-gandrica

💻 Usage & ImplementationHere is how to import and use the Table in your React application (like HRNet).

1. import { Table } from 'react-hrnet-table-gandrica';
2. import "react-hrnet-table-gandrica/style.css"; // Don't forget the styles!
3. Pass the list and tableHeaders as props Ex: <Table list={list} tableHeaders={tableHeaders}/>

import Table from "react-hrnet-table-gandrica";

export default function EmployeeList() {
  // 1. The list array
  const employeeList = [
    {
      firstName: "John",
      lastName: "Doe",
      startDate: "2022-01-01",
      department: "Sales",
      birthDate: "1990-01-01",
      street: "123 Main St",
      city: "New York",
      state: "NY",
      zipCode: "10001",
    },
    {
      firstName: "Jane",
      lastName: "Smith",
      startDate: "2022-01-01",
      department: "Marketing",
      birthDate: "1995-01-01",
      street: "456 Oak Ave",
      city: "Los Angeles",
      state: "CA",
      zipCode: "90210",
    },
    {
      firstName: "Michael",
      lastName: "Johnson",
      startDate: "2022-01-01",
      department: "Engineering",
      birthDate: "1985-01-01",
      street: "789 Elm St",
      city: "Chicago",
      state: "IL",
      zipCode: "60601",
    },
  ];

  // 2. The columns configuration ("First Name" = Header, firstName = data key)
  const columns = [
    { firstName: "First Name" },
    { lastName: "Last Name" },
    { startDate: "Start Date" },
    { department: "Department" },
    { birthDate: "Date of Birth" },
    { street: "Street" },
    { city: "City" },
    { state: "State" },
    { zipCode: "Zip Code" },
  ];

  return (
    <div className="table-wrapper">
      <h2>Current Employees</h2>
      <Table tableHeaders={columns} list={employeeList} />
    </div>
  );
}

🎛️ Props Reference Prop Name : tableHeaders Type : Array Required : Yes Description : Array of objects representing the data

Prop Name : list Type : Array Required : Yes Description : Array of objects to display in the tableHeaders

👨‍💻 Author Created by Gabriel ANDRICA for the OpenClassrooms Front-End Developer Path.