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" />
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;
To get and build the project you will need to install:
Copy the project and install dependencies:
git clone https://github.com/jeromeabel/ja-react-table.git
cd ja-react-table
pnpm install
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