Component: Table Column Renderers
Relevant source files
The following files were used as context for generating this wiki page:
The Table Column Renderers are a set of specialized React functional components responsible for rendering the content of specific cells within the certification data table. Each component is designed to display a particular piece of information from the CertificationMetadata object, such as the certification details, its associated career paths, or links for more information.
These components are consumed by the ReactiveDatatable component, which orchestrates the display of the entire certification database. They are placed inside TableCell elements to structure the data grid, ensuring a consistent and responsive layout for presenting certification data to the user.
Component Architecture
The column renderer components are part of a larger table structure managed by the ReactiveDatatable. The ReactiveDatatable fetches the data and then maps over the results, rendering a TableRow for each certification. Within each TableRow, TableCell components host the specific column renderer components.
Sources: src/components/astro/database/reactive-datatable.tsx:300-315, src/components/react/table.tsx:128-154
The following diagram illustrates the component hierarchy from the data table down to the individual column renderers.
Core Column Renderers
The system uses three primary components to render the main columns of the certification table. Each component receives the certification metadata object as props.
| Component | File | Purpose |
|---|---|---|
ColCertification | col-certification.tsx | Renders the main certification details, including title, acronym, and provider. Includes a responsive view for smaller screens. |
ColCertificationPath | col-certification-path.tsx | Displays the list of career paths associated with the certification. This is hidden on small screens. |
ColMoreDetails | col-more-details.tsx | Provides a navigation link to the full certification details page and displays the price. |
Sources: src/components/astro/database/reactive-datatable.tsx:304-312, src/components/astro/database/records-table/col-certification.tsx, src/components/astro/database/records-table/col-certification-path.tsx, src/components/astro/database/records-table/col-more-details.tsx
ColCertification
This component is responsible for rendering the primary "Certification" column.
- It displays the certification
titleandacronym. - It looks up a user-friendly provider name from
providerCustomNamesMappingor defaults to the raw provider name. - For small screens (
sm:hidden), it embeds theColMoreDetailscomponent to ensure essential details are visible. - The certification acronym is styled as a distinct badge.
Sources: src/components/astro/database/records-table/col-certification.tsx:11-42
The rendering logic for the provider name is shown below.
// src/components/astro/database/records-table/col-certification.tsx:12-15
const provider = useMemo(() => {
return providerCustomNamesMapping[certification.provider as keyof typeof providerCustomNamesMapping] ||
certification.provider;
}, [ certification.provider ]);
ColCertificationPath
This component renders the "Certification paths" column.
- It takes the
career_pathsarray from the certification metadata. - It is hidden by default and only appears on screens larger than the
smbreakpoint (hidden sm:table-cell). - The career paths are not directly rendered by this component; its implementation is not present in the provided files. The file exists but its content is not available in the context.
Sources: src/components/astro/database/reactive-datatable.tsx:270, src/components/astro/database/reactive-datatable.tsx:308-310, src/components/astro/database/records-table/col-certification-path.tsx
ColMoreDetails
This component renders the "More details" column, providing navigation and supplementary information.
- It creates a link to the detailed certification page using the
slug(e.g.,/database/<slug>). - The link is styled as "Expand" and includes a horizontally bouncing
ChevronRighticon for visual affordance. - It displays the certification
priceandcurrency. The price is formatted to two decimal places if it's a number and padded with spaces for alignment using a helper functionpadWithSpaces. - The price information is hidden on small screens (
hidden sm:block).
Sources: src/components/astro/database/records-table/col-more-details.tsx:7-29
The following diagram shows the conditional rendering logic within the ColMoreDetails component.
Usage in ReactiveDatatable
The ReactiveDatatable component is the direct consumer of these column renderers. It maps over the display_data array (which contains the filtered and paginated list of certifications) and renders a TableRow for each item. Each column renderer is placed within a TableCell to construct the row.
Sources: src/components/astro/database/reactive-datatable.tsx:296-316
// src/components/astro/database/reactive-datatable.tsx:296-316
{ display_data
.slice(
(pagination.page - 1) * pagination.per_page,
pagination.page * pagination.per_page,
)
.map((certification) => (
<TableRow
key={ `${ certification.provider }-${ certification.title }` }
>
<TableCell className="font-medium relative py-5 px-6 max-w-full">
<ColCertification { ...certification } />
</TableCell>
<TableCell className="hidden py-5 px-6 sm:table-cell">
<ColCertificationPath { ...certification } />
</TableCell>
<TableCell className="hidden sm:table-cell py-5 px-6 text-right">
<ColMoreDetails { ...certification } />
</TableCell>
</TableRow>
)) }
This snippet shows how each Col component is instantiated with the spread certification object, passing all necessary metadata as props. The className on the TableCell components controls visibility and styling, making the table responsive.
Sources: src/components/astro/database/reactive-datatable.tsx:304-314