Stop 13 · UI LibrariesTopics · 4/7

Ant Design

In short

Building an admin panel with tables, filters, forms and date pickers? Ant Design is made for exactly that kind of data-heavy screen, and it saves you days.

A comprehensive, enterprise-oriented React UI library with a huge component set (tables, forms, date pickers) popular for admin dashboards and internal tools.

The jaadu holds a basket inside a kirana store packed with jars, sacks and soap.

Think of it like this

A fully stocked kirana store

You go in for atta and find everything: masala, soap, batteries, even a phone recharge. Ant Design is that store for admin panels. Sortable tables, validated forms and date range pickers are already on the shelf.

Watch it happen

What the Marks sorter does

1/5dataSource has five students' marks in the order they came from the API.

The big ideas

What you need to know

Tables do the heavy lifting

Table handles sorting, filtering, pagination and row selection from a columns config and a data array.

Forms with built-in validation

Form.Item takes a name and rules, and shows error messages under the field automatically.

Theme with tokens

ConfigProvider takes a theme object, like token: { colorPrimary } to change the brand colour everywhere.

Enterprise look

It looks great for dashboards. For a playful consumer app, you'll fight its style more.

See it in code

Walk through the code

tsx

1import { Table, Tag } from "antd";2 3const columns = [4  { title: "Name", dataIndex: "name", key: "name" },5  { title: "Marks", dataIndex: "marks", key: "marks",6    sorter: (a: Student, b: Student) => a.marks - b.marks },7  { title: "Status", dataIndex: "marks", key: "status",8    render: (m: number) => <Tag color={m >= 40 ? "green" : "red"}>{m >= 40 ? "Pass" : "Fail"}</Tag> },9];10 11type Student = { id: number; name: string; marks: number };12const data: Student[] = [{ id: 1, name: "Riya", marks: 82 }, { id: 2, name: "Arjun", marks: 35 }];13 14export default function Results() {15  return <Table rowKey="id" columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />;16}

1/4Each column says what header to show and which data field to read with dataIndex.

Sorting and pagination come free. render lets one column show a coloured tag based on the value.

Save yourself the pain

Common mistakes

Oops

Forgetting rowKey and getting React key warnings.

Do this instead

Pass rowKey="id" (or whatever unique field you have) so Table can track each row.

Oops

Loading 10,000 rows into Table at once.

Do this instead

Use server-side pagination, or the virtual prop, so the browser isn't drawing thousands of rows.

Your mission

A mini student dashboard

~40 min

Quick check

Which Ant Design prop tells Table how to uniquely identify each row?

Go deeper

1Build a data table with sorting and filtering using Ant Design's Table component.
2Explore its form component with built-in validation.
3Notice its opinionated design language — great for admin tools, less so for unique consumer brands.