CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-types--react

tessl install tessl/npm-types--react@19.1.0

TypeScript definitions for React, the popular JavaScript library for building user interfaces

Agent Success

Agent success rate when using this tile

80%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.48x

Baseline

Agent success rate without this tile

54%

task.mdevals/scenario-3/

Data Table with Sorting and Filtering

Build a data table component that displays a list of products with sorting and filtering capabilities.

Requirements

Create a ProductTable class component that:

  1. Displays product data in a table format with the following columns:

    • Product name
    • Category
    • Price
    • Stock quantity

  2. Implements sorting functionality:

    • Clicking a column header should sort the table by that column
    • Clicking the same header again should reverse the sort order
    • Only one column can be sorted at a time

  3. Implements filtering functionality:

    • Provide an input field to filter products by name (case-insensitive, partial match)
    • Provide a dropdown to filter by category (show all categories, plus an "All" option)
    • Filters should work together (both name and category filters active simultaneously)

  4. Optimizes rendering:

    • The component should only re-render when props or state actually change
    • Avoid unnecessary re-renders when parent components update

  5. Initial data structure: The component should accept a products prop with the following TypeScript interface:

    interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  stock: number;
}

Implementation Details

  • Create the component as a TypeScript class component
  • The component should maintain its own internal state for:
    • Current sort column and direction
    • Filter values (name filter and category filter)
  • The component should receive product data as props
  • Implement proper typing for all props and state
  • Use appropriate lifecycle methods if needed for initialization or optimization

Test Cases

Test 1: Basic rendering { .test }

// File: ProductTable.test.tsx

import { render, screen } from '@testing-library/react';
import ProductTable from './ProductTable';

test('renders product table with data', () => {
  const products = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999, stock: 5 },
    { id: 2, name: 'Desk', category: 'Furniture', price: 299, stock: 10 },
  ];

  render(<ProductTable products={products} />);

  expect(screen.getByText('Laptop')).toBeInTheDocument();
  expect(screen.getByText('Desk')).toBeInTheDocument();
  expect(screen.getByText('999')).toBeInTheDocument();
  expect(screen.getByText('10')).toBeInTheDocument();
});

Test 2: Sorting functionality { .test }

// File: ProductTable.test.tsx

import { render, screen, fireEvent } from '@testing-library/react';
import ProductTable from './ProductTable';

test('sorts products by price when price header is clicked', () => {
  const products = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999, stock: 5 },
    { id: 2, name: 'Desk', category: 'Furniture', price: 299, stock: 10 },
    { id: 3, name: 'Mouse', category: 'Electronics', price: 29, stock: 50 },
  ];

  render(<ProductTable products={products} />);

  const priceHeader = screen.getByText('Price');
  fireEvent.click(priceHeader);

  const rows = screen.getAllByRole('row');
  // First data row should be Mouse (lowest price)
  expect(rows[1]).toHaveTextContent('Mouse');
  expect(rows[1]).toHaveTextContent('29');
});

Test 3: Filtering by name { .test }

// File: ProductTable.test.tsx

import { render, screen, fireEvent } from '@testing-library/react';
import ProductTable from './ProductTable';

test('filters products by name', () => {
  const products = [
    { id: 1, name: 'Laptop', category: 'Electronics', price: 999, stock: 5 },
    { id: 2, name: 'Desk', category: 'Furniture', price: 299, stock: 10 },
    { id: 3, name: 'Desktop Computer', category: 'Electronics', price: 1299, stock: 3 },
  ];

  render(<ProductTable products={products} />);

  const nameFilter = screen.getByPlaceholderText('Filter by name');
  fireEvent.change(nameFilter, { target: { value: 'desk' } });

  expect(screen.getByText('Desk')).toBeInTheDocument();
  expect(screen.getByText('Desktop Computer')).toBeInTheDocument();
  expect(screen.queryByText('Laptop')).not.toBeInTheDocument();
});

Dependencies { .dependencies }

@types/react { .dependency }

Provides TypeScript type definitions for React, including class component types and lifecycle methods.

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@types/react@19.1.x

evals

scenario-3

rubric.jsontask.md
tile.json