Component: Table Column Renderers

Relevant source files

The following files were used as context for generating this wiki page:

• 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
• src/components/astro/database/reactive-datatable.tsx
• src/components/react/table.tsx

The Table Column Renderers are a set of specialized React functional components designed to handle the presentation logic for individual columns within the certification database table. Each component is responsible for rendering a specific piece of data from a CertificationMetadata object, such as the certification title, its associated career paths, or a link for more details.

These components are consumed by the ReactiveDatatable component, which orchestrates the overall table structure, data fetching, and pagination. By encapsulating the rendering logic for each column, these components promote a modular and maintainable architecture, separating the concerns of data presentation from the table's state management and structure.

Component Integration

The column renderer components are integrated within the TableBody of the ReactiveDatatable. The ReactiveDatatable component maps over the display_data array, and for each certification object, it creates a TableRow. Inside each row, TableCell components are used to wrap the specific column renderer components, passing the certification data as props.

This diagram illustrates the component hierarchy, showing how the column renderers fit into the overall table structure.

Usage in ReactiveDatatable

The following code snippet from ReactiveDatatable shows how each column renderer is placed within a TableCell to construct a row in the certifications table.

// File: src/components/astro/database/reactive-datatable.tsx:313-333
{ 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>
    )) }

Sources: src/components/astro/database/reactive-datatable.tsx:313-333

Column Renderer Components

ColCertification

This component renders the main "Certification" column. It displays the certification's title, its acronym, and the provider's name. It also has a responsive behavior where it embeds the ColMoreDetails component for smaller screen sizes.

Sources: src/components/astro/database/records-table/col-certification.tsx

Props

Prop	Type	Description	Source
certification	CertificationMetadata	An object containing all metadata for a single certification.	[col-certification.tsx:11](https://github.com/cyberpath-HQ/CertDb/blob/HEAD/col-certification.tsx#L11)

Logic and Display

1. Provider Name Mapping: The component uses a providerCustomNamesMapping to translate the raw provider name from the data into a more user-friendly format. If no mapping exists, it defaults to the original provider name.
2. Primary Information: It displays the certification title and acronym. The acronym is styled as a badge and is hidden on small screens (sm:block).
3. Provider Display: The mapped provider name is shown below the title.
4. Responsive Details: On small screens (sm:hidden), it renders the ColMoreDetails component inline to provide access to the details link and price, which are otherwise in a separate column on larger screens.

This diagram shows the data flow and conditional rendering within the ColCertification component.

ColCertificationPath

This component is responsible for rendering the "Certification paths" column. It displays a list of clickable links for each career path associated with the certification.

Sources: src/components/astro/database/records-table/col-certification-path.tsx

Props

Prop	Type	Description	Source
certification	CertificationMetadata	An object containing all metadata for a single certification.	[col-certification-path.tsx:10](https://github.com/cyberpath-HQ/CertDb/blob/HEAD/col-certification-path.tsx#L10)

Logic and Display

1. Path Iteration: The component maps over the career_paths array from the certification prop.
2. URL Generation: For each path, it generates a kebab-cased URL slug using the dash utility from the radash library. The base URL is /career-paths/.
3. Link Rendering: Each path is rendered as an <a> tag, styled as a badge, linking to the corresponding career path page.

ColMoreDetails

This component renders the "More details" column, which includes a link to the certification's dedicated page and its price.

Sources: src/components/astro/database/records-table/col-more-details.tsx

Props

Prop	Type	Description	Source
slug	string	The URL slug for the certification.	[col-more-details.tsx:7](https://github.com/cyberpath-HQ/CertDb/blob/HEAD/col-more-details.tsx#L7)
price	string	The price of the certification.	[col-more-details.tsx:7](https://github.com/cyberpath-HQ/CertDb/blob/HEAD/col-more-details.tsx#L7)
currency	string	The currency for the price.	[col-more-details.tsx:7](https://github.com/cyberpath-HQ/CertDb/blob/HEAD/col-more-details.tsx#L7)

Logic and Display

1. Details Link: An "Expand" link is rendered, pointing to /database/{certification.slug}. It includes a right-pointing chevron icon with a horizontal bounce animation.
2. Price Formatting:
   • The price is displayed in a tabular-nums font for consistent character width.
   • It checks if the price can be converted to a number.
   • If it's a number, it's formatted to two decimal places (toFixed(2)).
   • If it's not a number (e.g., "Varies"), it's used as is.
   • The padWithSpaces utility is used to ensure the price string has a consistent width for alignment.
   • The currency is appended to the formatted price.
3. Responsive Visibility: The price information is hidden on small screens (hidden sm:block).

Summary

The Table Column Renderer components are a key part of the UI for the CertDb application. They effectively encapsulate the display logic for specific data fields of a certification, allowing the parent ReactiveDatatable component to remain clean and focused on state management, data fetching, and overall table structure. This modular approach improves code readability, maintainability, and reusability.

Sources: src/components/astro/database/reactive-datatable.tsx, 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