Machine Coding — Data Table

1. Learning Objectives

In this machine coding guide, you will build a performant, signal-driven Data Table component. By the end of this exercise, you will be able to:

• Handle interactive sorting states (Ascending, Descending, None) dynamically.
• Filter rows reactively using signal-bound text query inputs.
• Calculate paging windows (slice offsets, page counts) using computed().
• Track multi-row selection states using unique item ID Set pools.
• Optimize change detection cycles using OnPush component controls.

2. What We Are Building & Design System

Under interview settings, you are tasked with building a reusable data table grid. Requirements include:

• Fuzzy Search Box: A search field filtering items by name or location.
• Column Headers: Clickable headings that toggle sorting on fields (Name, Age, Role).
• Pagination Controls: Displays active page index and size selection. Includes Prev/Next triggers.
• Checkbox Selection: Allows clicking a master header checkbox to select/deselect all rows on the active page.

3. Step-by-Step Implementation Guide

Step 1: Declare State Signals

Establish independent states for sorting columns, query inputs, page counts, and selected ID lists:

Step 2: Chain Derived Computed Signals

Set up reactive computation pipelines that execute sorting, filtering, and paging sequentially:

Step 3: Implement Selection Handlers

Manipulate selected sets immutably, triggering signal notifications by assigning new Set references.

4. Full Working Code

Save this standalone structure to run the table component:

5. Reviewing the Build / Self-Correction Checks

Verify your component implementation handles constraints:

• Verify Selection Integrity across Pages: Check rows on Page 1, navigate to Page 2, and check back. Verify that selected count counts row sets from *both* page views correctly.
• Check Search Indices resets: Perform a filter query that yields fewer items than page size limits, and verify the pagination index resets back to Page 1 to avoid blank templates rendering.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this data table, you have structured signal dependency pipelines, optimized paging slices, and managed selections.

• Next, proceed to **Machine Coding — File Explorer** to build recursive folder structures.

---