Portal Table Mockup
| Company Name | Company URL | Primary Contact | Date Created | Last Modified | Status |
| ACP Biomech LTD | https://www.acpbiomech.com/ | Eddie Claude | 02 APR 2024 | 03 APR 2024 | Inactive |
| Agricore Labs | https://www.agclabs.com/ | John Baker | 22 FEB 2024 | 07 APR 2024 | Approved |
| English Bakeries CO | https://www.engbakeries.ca/ | Sarah English | 05 APR 2024 | 06 APR 2024 | Pending |
| Grass Labs | https://www.grass.ca/ | Kara Dunez | 01 JAN 2024 | 01 APR 2024 | Approved |
| Dumpling Fields LTD | https://www.dumps.com/ | Jose Chang | 09 FEB 2024 | 08 APR 2024 | Inactive |
| Farmer Market Inc | https://www.farmbros.com/ | Jace Mack | 02 APR 2024 | 03 APR 2024 | Approved |
Overview
This component is a table mimicking functionality from the previous version of the CNH Developer Portal. It bases its styles on other tables made for Docs.
Note that in props, object properties are expected to be sorted. In practical applications, the objects provided to this component would be pre-processed.
Details
| Criteria | Component Meets Criteria |
|---|---|
| Has hover styles | Yes |
| Has light and dark mode | Yes |
| Has brand theming | No |
Component Props
| Prop Name | Type | Description |
|---|---|---|
| columnHeaders | object | Contains the header data for the table |
| entries | array | Contains the entries for the table |
Example Code
import PortalTable from '@site/src/elements/PortalTable';
<PortalTable
columnHeaders={{
companyName: 'Company Name',
companyURL: 'Company URL',
primaryContact: 'Primary Contact',
dateCreated: 'Date Created',
lastModified: 'Last Modified',
status: 'Status',
}}
entries={[
{
companyName: 'ACP Biomech LTD',
companyURL: 'https://www.acpbiomech.com/',
primaryContact: 'Eddie Claude',
dateCreated: '02 APR 2024',
lastModified: '03 APR 2024',
status: 'Inactive',
},
{
companyName: 'Agricore Labs',
companyURL: 'https://www.agclabs.com/',
primaryContact: 'John Baker',
dateCreated: '22 FEB 2024',
lastModified: '07 APR 2024',
status: 'Approved',
},
{
companyName: 'English Bakeries CO',
companyURL: 'https://www.engbakeries.ca/',
primaryContact: 'Sarah English',
dateCreated: '05 APR 2024',
lastModified: '06 APR 2024',
status: 'Pending',
},
]}
/>