ja-react-table

This project is the n°14 of the OpenClassrooms Front-End learning path.

The goal is to create a React component and publish it as a NPM package.

I've built a React Table component written in TypeScript. It displays tabular data with sorting, searching, pagination, and error handling functionalities.

Example:

<Table<ItemType> headers={headers} items={items} sortBy="dateOfBirth" />

✨ Interface

🚀 Usage as a npm package

1 - install the package

pnpm install ja-react-table

2 - use it in your React project.

// Import the component
import { Table } from 'ja-react-table';

// Import CSS (tailwind)
import 'ja-react-table/dist/style.css';

// Some data
const headers = [
  { name: 'firstName', label: 'First name' },
  { name: 'dateOfBirth', label: 'Date of birth' },
];

type UserType = {
  firstName: string;
  dateOfBirth: Date;
};

const users: UserType[] = [
  {
    firstName: 'John',
    dateOfBirth: new Date('1980-01-01'),
  },
  {
    firstName: 'Alice',
    dateOfBirth: new Date('1985-02-10'),
  },
  {
    firstName: 'Peter',
    dateOfBirth: new Date('1977-01-24'),
  },
  {
    firstName: 'Sarah',
    dateOfBirth: new Date('1992-08-15'),
  },
  {
    firstName: 'Michael',
    dateOfBirth: new Date('1988-06-05'),
  },
];

function App() {
  return (
    <div className="container mx-auto">
      <Table<UserType> headers={headers} items={users} />
    </div>
  );
}

export default App;

🛠️ Installation

To get and build the project you will need to install:

• NodeJS
• Git
• Optional : PNPM instead of NPM

Copy the project and install dependencies:

git clone https://github.com/jeromeabel/ja-react-table.git
cd ja-react-table
pnpm install

Tests

Manual tests in the browser and open the browser at this address : http://localhost:5173/

npm run dev

With integration tests

npm run test
npm run coverage

👤 Author

@jeromeabel

📝 License

GNU--GPL--3