ReactDataTable

ReactDataTables is a React component that provides a flexible and responsive data table. It offers features such as pagination, sorting, searching, and table length selection.

Installation

npm install @nonqme/react-data-table

Usage

import ReactDataTable from "@nonqme/react-data-table";

// Your data
const data = [
  {
    id: 1,
    firstName: "John",
    lastName: "Doe",
    startDate: "2011-01-01",
    department: "IT",
    dateOfBirth: "1980-01-01",
    street: "123 Main St",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
  {
    id: 2,
    firstName: "Jane",
    lastName: "Doe",
    startDate: "2012-02-02",
    department: "HR",
    dateOfBirth: "1981-02-02",
    street: "456 Main St",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
  {
    id: 3,
    firstName: "Joe",
    lastName: "Schmoe",
    startDate: "2013-03-03",
    department: "IT",
    dateOfBirth: "1982-03-03",
    street: "789 Main St",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
  {
    id: 4,
    firstName: "Jill",
    lastName: "Schmoe",
    startDate: "2014-04-04",
    department: "HR",
    dateOfBirth: "1983-04-04",
    street: "012 Main St",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
  {
    id: 5,
    firstName: "Jack",
    lastName: "Smith",
    startDate: "2015-05-05",
    department: "IT",
    dateOfBirth: "1984-05-05",
    street: "345 Main St",
    city: "New York",
    state: "NY",
    zipCode: "10001",
  },
];

// Your columns
const columns = [
  { title: "First Name", dataKey: "firstName" },
  { title: "Last Name", dataKey: "lastName" },
  { title: "Start Date", dataKey: "startDate" },
  { title: "Department", dataKey: "department" },
  { title: "Date of Birth", dataKey: "dateOfBirth" },
  { title: "Street", dataKey: "street" },
  { title: "City", dataKey: "city" },
  { title: "State", dataKey: "state" },
  { title: "Zip Code", dataKey: "zipCode" },
];

<ReactDataTables columns={columns} data={data} />;

Props

• columns: An Array of objects representing the table columns. Each object must have a title property which is the column name and a dataKey property which is the key of the corresponding data in the data objects.
• data: An Array of objects representing the table data. Each object must have keys corresponding to the dataKey of the columns.

Features

• Pagination: The data is divided into pages, with navigation controls between pages.
• Sorting: Click on a column header to sort the data by that column.
• Searching: Enter a search term to filter the data displayed in the table.
• Table length: Select the number of rows to display per page.