Data Table with Sorting & Filtering

Question

Build a data table with sortable columns and a filter input.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; const data = [ { name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }, { name: 'Carol', age: 35 }, { name: 'Dave', age: 28 } ]; function App() { const [sort, setSort] = useState({ key: 'name', dir: 1 }); const [filter, setFilter] = useState(''); const filtered = data.filter(row => row.name.toLowerCase().includes(filter.toLowerCase())); const sorted = [...filtered].sort((a, b) => (a[sort.key] > b[sort.key] ? sort.dir : -sort.dir)); return (

Data Table

setFilter(e.target.value)} placeholder='Filter by name...' /> {sorted.map(row => ( ))}

setSort(s => ({ key: 'name', dir: s.key === 'name' ? -s.dir : 1 }))}>Name	setSort(s => ({ key: 'age', dir: s.key === 'age' ? -s.dir : 1 }))}>Age
{row.name}	{row.age}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .dt-demo { max-width: 500px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .dt-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .dt-input { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; } .dt-table { width: 100%; border-collapse: collapse; } .dt-table th, .dt-table td { padding: 0.7rem 1.2rem; border-bottom: 1px solid #e5e7eb; text-align: left; } .dt-table th { cursor: pointer; background: #f1f5f9; }