How to create tables in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Tables display structured data in rows and columns, essential for dashboards, admin panels, and data-heavy applications requiring organized information presentation. As the creator of CoreUI, a widely used open-source UI library, I’ve built table components in React applications throughout my 11 years of React development. The most straightforward approach is using semantic HTML table elements with array mapping to render dynamic data. This method provides accessible, SEO-friendly tables with full control over styling and behavior.
Use HTML table elements with map() to render dynamic data in rows and columns.
const UserTable = ({ users }) => {
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{users.map(user => (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.role}</td>
</tr>
))}
</tbody>
</table>
)
}
const App = () => {
const users = [
{ id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
{ id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' }
]
return <UserTable users={users} />
}
Here the table uses semantic HTML elements: thead for headers, tbody for data rows, and th/td for cells. The users.map() iterates over the data array, creating a tr for each user. The key prop uses user.id for React’s reconciliation. This structure provides proper accessibility with screen readers understanding table semantics, proper SEO indexing, and straightforward CSS styling with standard table selectors.
Best Practice Note:
This is the table structure we use in CoreUI React components for basic data display with semantic HTML. Add responsive design with horizontal scrolling for mobile devices, implement loading states for async data fetching, and consider using CoreUI’s pre-built Table component for consistent styling with built-in features like striped rows and hover effects.
