npm i @axa-fr/react-toolkit-tableIf you are using the Paging component, you need to install the select component of the toolkit.
npm i @axa-fr/react-toolkit-form-input-select
npm i @axa-fr/react-toolkit-form-coreimport Table from '@axa-fr/react-toolkit-table';
import '@axa-fr/react-toolkit-table/dist/af-table.css';If you are using the Paging component, you need to import the style for the select component.
import '@axa-fr/react-toolkit-form-input-select/dist/af-select.css';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';Available values for classModifier :
| classModifier / type |
|---|
| sante |
| epargne |
| banque |
| iard |
| retraite |
| uaxa |
const TableSimple = () => (
<Table classModifier="banque" className="af-table">
<Table.Header>
<Table.Tr>
<Table.Th colSpan={3}>
<span className="af-table-th-content">Some text</span>
</Table.Th>
</Table.Tr>
</Table.Header>
<Table.Body>
<Table.Tr>
<Table.Td rowSpan={2}>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<b>Some balised text</b>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
</Table.Body>
</Table>
);
export default TableSimple;import Table, { Paging } from '@axa-fr/react-toolkit-table';
import '@axa-fr/react-toolkit-table/dist/af-table.css';
import '@axa-fr/react-toolkit-table/dist/Paging/af-paging.css';
import '@axa-fr/react-toolkit-table/dist/Pager/af-pager.css';Available values for classModifier :
| classModifier / type |
|---|
| sante |
| epargne |
| banque |
| iard |
| retraite |
| uaxa |
const ComplexTable = () => (
<div>
<Table classModifier="epargne" className="af-table">
<Table.Header>
<Table.Tr>
<Table.Th>
<span className="af-table-th-content">Some text</span>
</Table.Th>
<Table.Th>
<span className="af-table-th-content">Some text</span>
</Table.Th>
<Table.Th>
<span className="af-table-th-content">Some text</span>
</Table.Th>
</Table.Tr>
</Table.Header>
<Table.Body>
<Table.Tr>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<b>Some balised text</b>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
<Table.Tr>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
<Table.Td>
<span className="af-table-body-content">Some text</span>
</Table.Td>
</Table.Tr>
</Table.Body>
</Table>
<Paging
onChange={(e) => {
console.log('Salut');
}}
numberItems={20}
numberPages={23}
currentPage={5}
/>
</div>
);
export default ComplexTable;