Component: ReactiveDatatable
Relevant source files
The following files were used as context for generating this wiki page:- src/components/astro/database/reactive-datatable.tsx
- src/components/react/table.tsx
- src/components/react/pagination.tsx
- src/pages/career-paths/[path]/data.json.ts
- src/pages/career-paths/[path]/data-index.json.ts
- package.json
- src/components/astro/database/records-table/col-certification.tsx
- src/components/astro/database/records-table/col-more-details.tsx
The ReactiveDatatable is a client-side React component designed to render a dynamic, searchable, and paginated table of certification data. It operates within an Astro project, marked by the "use client"; directive. The component is responsible for fetching the entire certification dataset and a pre-computed search index, enabling fast, client-side fuzzy searching using Fuse.js.
This component encapsulates all logic for data fetching, state management, filtering, and pagination. It synchronizes its state (current page and search query) with the URL search parameters, allowing for shareable and bookmarkable views of the data table. It is a central feature for users to browse and find cybersecurity certifications on the platform.
Sources: src/components/astro/database/reactive-datatable.tsx:3, 30-34, README.md:18-20
Architecture and Dependencies
The ReactiveDatatable is a functional React component that orchestrates several other smaller UI components to build the final view. Its architecture is self-contained, managing its own state and data fetching lifecycle.
Sources: src/components/astro/database/reactive-datatable.tsx:36
Key Dependencies
- React: Used for component logic and state management (
useState,useEffect,useMemo). - Fuse.js: A powerful, lightweight fuzzy-search library used for client-side searching of certifications.
Sources: package.json:20, src/components/astro/database/reactive-datatable.tsx:20 - radash: A utility library used for its
allfunction to handle concurrent promise resolution during data fetching.
Sources: package.json:21, src/components/astro/database/reactive-datatable.tsx:21 - Custom UI Components:
HeaderSearchBar: A search input component.Table,TableHead,TableBody, etc.: Reusable components for rendering the data grid.Pagination,PaginationNext,PaginationPage, etc.: Reusable components for pagination controls.ColCertification,ColCertificationPath,ColMoreDetails: Specific components for rendering the content of table cells.
Sources: src/components/astro/database/reactive-datatable.tsx:4-19, src/components/react/table.tsx, src/components/react/pagination.tsx
Component Structure
The diagram below illustrates the hierarchy of components that compose the ReactiveDatatable.
This diagram shows how ReactiveDatatable uses HeaderSearchBar, Table, and Pagination as its main building blocks, with the Table component further composed of rows and specialized cell-rendering components.
Sources: src/components/astro/database/reactive-datatable.tsx:294-428
State Management
The component uses several useState hooks to manage its internal state, from loading and error status to the data itself and user interactions like searching and pagination.
| State Variable | Type | Description |
|---|---|---|
is_loading | boolean | Tracks the initial data fetching state. True while fetching, false otherwise. |
error | string | null | Stores an error message if data fetching fails. |
all_raw_data | CertificationMetadataCollection | An array containing all certification objects fetched from the server. |
all_data | Fuse<CertificationMetadata> | A Fuse.js instance initialized with the certification data and a pre-computed index for fast searching. |
query | string | null | The current search string entered by the user. |
pagination | object | Contains pagination state: page (current page), total_pages, and per_page (items per page). |
url_search_params | URLSearchParams | A copy of the browser's URL search parameters, used to construct pagination links. |
Sources: src/components/astro/database/reactive-datatable.tsx:39-55
Data Flow and Initialization
On initial mount, the component executes a useEffect hook to fetch data and initialize its state.
Initialization Sequence
- The component reads the
pageandqueryparameters from the current URL to set the initial state. - It concurrently fetches two API endpoints:
${base_url}/data.json: Contains the full array of certification metadata.${base_url}/data-index.json: Contains a pre-computed Fuse.js index to speed up search initialization.
- Once both requests succeed, the component initializes the
all_raw_datastate and creates a newFuseinstance with the data and the parsed index. - It calculates
total_pagesand updates the pagination state. - The
is_loadingstate is set tofalse, and the component re-renders to display the data.
Sources: src/components/astro/database/reactive-datatable.tsx:170-244, src/pages/career-paths/[path]/data.json.ts, src/pages/career-paths/[path]/data-index.json.ts
The following sequence diagram illustrates the data fetching process.
This diagram shows the asynchronous data fetching and state initialization that occurs when the component first loads.
Sources: src/components/astro/database/reactive-datatable.tsx:186-244
Search, Filtering, and Display
The component provides a reactive experience where the displayed data updates instantly based on user input.
Search and Filtering Logic
- User input in the
HeaderSearchBarupdates thequerystate. - A
useMemohook calculates thedisplay_data.- If
queryis empty,display_datais the completeall_raw_data. - If
queryhas a value,display_databecomes the result ofall_data.search(query).
- If
- When
display_datachanges, the component recalculatestotal_pagesfor the pagination.
Sources: src/components/astro/database/reactive-datatable.tsx:145-168
This flowchart shows the logic for determining which data to display.
This diagram shows how the display_data is derived based on the search query, which then feeds into the rendering logic.
Sources: src/components/astro/database/reactive-datatable.tsx:145-168, 331-334
Rendering
- The component conditionally renders a loading indicator, an error message, or a "No results found" message based on the
is_loading,error, anddisplay_data.lengthstates. - The final data to be rendered is a slice of
display_databased on the current page and items per page:display_data.slice(...). - Each item in the sliced array is mapped to a
TableRowcomponent, which usesColCertification,ColCertificationPath, andColMoreDetailsto render the cell contents.
Sources: src/components/astro/database/reactive-datatable.tsx:309-354, src/components/astro/database/records-table/col-certification.tsx, src/components/astro/database/records-table/col-more-details.tsx
Component Properties
The ReactiveDatatable component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
loading | ReactNode | - | A React element or component to display while the initial data is being fetched. |
base_url | string | "/database" | The base URL path for fetching data.json and data-index.json. |
Sources: src/components/astro/database/reactive-datatable.tsx:30-36
Conclusion
The ReactiveDatatable component is a sophisticated and essential part of the CertDb application, providing a rich, interactive user experience for exploring certification data. By leveraging client-side search with Fuse.js and managing its own state, it delivers fast, responsive filtering and pagination without needing additional server requests after the initial load. Its architecture, which relies on state synchronization with URL parameters, makes it robust and user-friendly.
Sources: src/components/astro/database/reactive-datatable.tsx