Render a responsive table with a list of items from props : data={YOURDATA} optimised for 5 to 10 different data

v18.18.2

The Table component is organized into several subcomponents for maximum clarity and efficient reuse. Each subcomponent has a specific role in displaying and managing table data. Here is the layout and description of each subcomponent:

• TableLenght: Manages the number of elements to display in the table.
• TableFilter: Provides search functionality to filter the data displayed in the table.

• TableHead: Displays the table header with data keys.
• TableBody: Manages the display of data in the table body with data values.

• TableInfo: Displays information about the data currently visible in the table.
• TablePaginate: Pagination controls to navigate between different pages of data Table.

the functions are executed by the sub-components but are managed in a dedicated file so that the sub-components can concentrate on rendering.

To use the Table component, pass the data as an array of objects to the data prop:

import Table from "pmf-table";
import "pmf-table/style.css";

npm i pmf-table

data (array of objects, required):

• The data prop must be an array of objects, where each object represents a row in the array.
• Each object can have varied keys and values. The keys represent the column headers and the values, the data of each cell.

[
  { "name": "Alice", "age": 30, "department": "Sales" },
  { "name": "Bob", "age": 32, "department": "Marketing" }
]

import { Table } from "pmf-table";
import "pmf-table/style.css";
<Table data={data} />;

This subcomponent allows the user to choose the number of rows to display in the table.

<TableLenght setDisplayLength={setDisplayLength} />

Allows you to filter table data based on a search string.

<TableFilter setInputValue={setInputValue} setPageNumber={setPageNumber} />

Manages the display of table column headers and allows data sorting.

<TableHead
  tableHeadContents={tableHeadContents}
  sortedColumn={sortedColumn}
  setSortedColumn={setSortedColumn}
  sortDirection={sortDirection}
  setSortDirection={setSortDirection}
/>

Displays table data in the table body.

<TableBody
  displayedData={displayedData}
  displayLength={displayLength}
  pageNumber={pageNumber}
  sortedColumn={sortedColumn}
  tableHeadContents={tableHeadContents}
/>

Shows information about the data currently visible in the table, such as the total number of rows and the rows displayed.

<TableInfo
  displayLength={displayLength}
  totalLength={displayedData.length}
  pageNumber={pageNumber}
  data={data}
/>

Provides pagination controls to navigate between pages of table data.

<TablePaginate
  displayLength={displayLength}
  totalLength={displayedData.length}
  pageNumber={pageNumber}
  setPageNumber={setPageNumber}
/>

All main CSS classes in this component are prefixed with pmf- (short for Polymorf), which helps quickly identify classes as part of the Polymorf table component library.

• Basic Elements: The classes linked to the basic elements of the Table component follow the pmf-elementName format. Example: pmf-table, pmf-tableHead, pmf-tableBody.

• Children and Subelements: The classes of subelements or child elements follow the format pmf-elementName-childName. Example: pmf-table-row, pmf-table-cell.

Here are some examples of our class naming convention:

• Main table: pmf-table
• Table header: pmf-tableHead
• Header cell: pmf-tableHeadCell
• Table body: pmf-tableBody
• Table body cell: pmf-tableCell
• Table pagination: pmf-tablePagination

Table manages all states of the component. Table uses a useEffect to re-render the component after each change.