Product Table - Render a Sortable Filterable Product Listing Component

Question

## Problem

Build a product listing table component. Given an array of product objects, render a table with:

- Columns: Name, Category, Price, Stock.
- Clicking a column header toggles sort ascending/descending on that column.
- A text input filters products by name (case-insensitive, debounced 300ms).
- A category dropdown filters to a single category (or "All").
- Show "No results" when the filtered list is empty.

```jsx
// Data shape
// {id, name, category, price, stock}
function ProductTable({ products }) {
  // ...
}
```

**Expected behavior:**
```
User clicks "Price" header -> sorted ascending by price
User clicks "Price" again -> sorted descending
User types "lap" in search -> shows only products with "lap" in name
User selects "Electronics" in dropdown -> combined with active sort
```

## Follow-ups

1. How do you compose sort and filter without re-deriving state on every keystroke?
2. How would you virtualize the list if there are 10,000 products?
3. Describe how to persist the sort/filter state in the URL query string.
4. How would you make the table accessible for screen readers?

Product Table - Render a Sortable Filterable Product Listing Component

Question Details

Full Details

Topics

More from C3 AI