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

1

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',
		},
	]}
/>