HRnet React Tableau

HRnet React Tableau is a customizable React TypeScript table component.

Installation

To install the package, run:

npm install hrnet-react-tableau

Imports

To use the component, import both the table component and the CSS file:

import { DataTable } from "hrnet-react-tableau";
import type { TableColumn } from "hrnet-react-tableau";
import "hrnet-react-tableau/dist/style.css";

Usage

First, define the type of data you want to display.

type Employee = {
  firstName: string;
  lastName: string;
  startDate: string;
  department: string;
  dateOfBirth: string;
  street: string;
  city: string;
  state: string;
  zipCode: string;
};

Then, define the table columns.

const columns: TableColumn<Employee>[] = [
  { key: "firstName", label: "First Name" },
  { key: "lastName", label: "Last Name" },
  { key: "startDate", label: "Start Date" },
  { key: "department", label: "Department" },
  { key: "dateOfBirth", label: "Date of Birth" },
  { key: "street", label: "Street" },
  { key: "city", label: "City" },
  { key: "state", label: "State" },
  { key: "zipCode", label: "Zip Code" },
];

Finally, pass the columns and data to the component.

<DataTable columns={columns} data={employees} />

Component signature

<DataTable columns={columns} data={data} />

Props

| Prop | Type | Required | Description | |---|---|---|---| | columns | TableColumn<T>[] | Yes | Defines the table headers and the object keys used to display each column. | | data | T[] | Yes | Contains the rows displayed inside the table. |

TableColumn

The TableColumn type defines each column displayed in the table.

export type TableColumn<T> = {
  key: keyof T;
  label: string;
};

| Property | Type | Description | |---|---|---| | key | keyof T | Object key used to retrieve the value from each row. | | label | string | Text displayed in the table header. |

Example:

const columns: TableColumn<Employee>[] = [
  { key: "firstName", label: "First Name" },
  { key: "lastName", label: "Last Name" },
  { key: "department", label: "Department" },
];

Complete example

import { DataTable } from "hrnet-react-tableau";
import type { TableColumn } from "hrnet-react-tableau";
import "hrnet-react-tableau/dist/style.css";

type Employee = {
  firstName: string;
  lastName: string;
  startDate: string;
  department: string;
  dateOfBirth: string;
  street: string;
  city: string;
  state: string;
  zipCode: string;
};

const columns: TableColumn<Employee>[] = [
  { key: "firstName", label: "First Name" },
  { key: "lastName", label: "Last Name" },
  { key: "startDate", label: "Start Date" },
  { key: "department", label: "Department" },
  { key: "dateOfBirth", label: "Date of Birth" },
  { key: "street", label: "Street" },
  { key: "city", label: "City" },
  { key: "state", label: "State" },
  { key: "zipCode", label: "Zip Code" },
];

const employees: Employee[] = [
  {
    firstName: "John",
    lastName: "Doe",
    startDate: "2024-01-15",
    department: "Engineering",
    dateOfBirth: "1990-05-10",
    street: "10 Main Street",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
  {
    firstName: "Jane",
    lastName: "Smith",
    startDate: "2023-09-01",
    department: "Marketing",
    dateOfBirth: "1988-03-22",
    street: "25 Market Street",
    city: "Boston",
    state: "MA",
    zipCode: "02108",
  },
];

function EmployeeList() {
  return <DataTable columns={columns} data={employees} />;
}

export default EmployeeList;

Features

The component includes the main features expected from a data table:

• global search across all columns;
• sorting by clicking on a column header;
• pagination;
• entries-per-page selection;
• TypeScript support;
• external CSS file for customization.

How it works

The component uses React state to manage the table behavior.

| State | Role | |---|---| | search | Stores the search input value. | | sortKey | Stores the selected column used for sorting. | | sortDirection | Stores the sort direction: ascending or descending. | | currentPage | Stores the active pagination page. | | entriesPerPage | Stores the number of rows displayed per page. |

The table logic is based on standard JavaScript methods:

| Functionality | Method used | |---|---| | Search | filter() | | Sorting | sort() | | Pagination | slice() | | Rendering rows | map() |

CSS

The package includes a CSS file:

import "hrnet-react-tableau/dist/style.css";

You can override the default styles in your own application.

Main CSS classes:

| Classname | Description | |---|---| | .data-table | Main table container. | | .data-table-controls | Container for search and entries-per-page controls. | | .data-table-table | Main HTML table. | | .data-table-footer | Footer containing pagination information. | | .data-table-pagination | Pagination controls. |

Local development

Clone the repository and install dependencies:

npm install

Run the local development server:

npm run dev

Why this package?

The original HRnet application used a jQuery DataTables plugin.

This package replaces that plugin with a React TypeScript component. The component avoids direct DOM manipulation and uses React state instead. This makes it easier to maintain, easier to type, and more consistent with a modern React application.

GitHub

You can find the source code on GitHub:

https://github.com/Karhn/HRnet-React-Tableau

Author

Gaston Dubois

License

MIT