DataTablePlugin

DataTablePlugin is a custom React component, part of the last project on the OpenClassrooms Front-End learning path. It's designed to display, sort, filter, paginate, manage tabular data efficiently and publish it as a NPM package.

Prerequisites

• NodeJS (version 16.17.0)
• NPM (version 9.4.0)
• React (version 18.2.0)

Getting started

Installation

    npm install ebo-react-datatable

Usage

import DataTablePlugin from 'ebo-react-datatable';
import 'ebo-react-datatable/src/DataTablePlugin.css';

// Define data and columns
const data = [{...}, {...}];
const columns = [{ title: 'First Name', key: 'firstName' }, ...];

function App() {
    return <DataTablePlugin data={data} columns={columns} dateFormat="yyyy-mm-dd" />;
}

The DataTablePlugin component takes the following props:

data: An array of objects representing the rows in the table. columns: An array of objects representing the columns in the table. Each object should have a title (the column header) and a key (the key in the data that this column should display). dateFormat: A string representing the format of the dates in the table. Default is 'dd/mm/yyyy'. available formats: 'dd/mm/yyyy' 'mm/dd/yyyy' 'yyyy/mm/dd' 'dd-mm-yyyy' 'mm-dd-yyyy' 'yyyy-mm-dd' 'dd.mm.yyyy' 'mm.dd.yyyy' 'yyyy.mm.dd' ISO --> (yyyy-mm-ddThh:mm:ss)

exemple:

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

const users = [
  {
    firstName: "Patrick",
    lastName: "Ward",
    dateOfBirth: "07/04/1987",
    startDate: "12/28/2022",
    department: "Finance",
    street: "160 Michael Garden",
    city: "Singhberg",
    state: "AZ",
    zipCode: "65578",
  },
];
return <DataTablePlugin data={users} columns={columns} dateFormat="mm/dd/yyyy" />;

✨ Features and Interface The component offers functionalities like sorting, searching and pagination with an intuitive UI.

📝 License This project is licensed under the MIT License.

👨‍💻 Author This project was created by Eric Bouillaut.