Ant Design Table in the SPFx

This article explains how to implement the Ant Design Table in a SharePoint Framework (SPFx) web part.
Ant Design provides a clean and professional UI library for enterprise-grade applications, enabling SPFx developers to create modern, responsive web parts effortlessly.

⚙️ Install Dependencies

Run the following commands to install Ant Design and related dependencies:

npm install antd --save

Import the required libraries and set up the SPFx context inside your web part:

import { sp } from "@pnp/sp/presets/all";

sp.setup({ spfxContext: this.props.context });

🧩 Implement the Ant Design Table

Update your component’s render method to include the Ant Design table logic.

public render(): React.ReactElement<ISpFxAntTableProps> {
  return (
    <div style={{ padding: "20px" }}>
      <h3>Department List</h3>
      <Table columns={this.columns} dataSource={this.state.data} onChange={this.handleChange} />
    </div>
  );
}

Define your columns and data retrieval logic:

public async componentDidMount(): Promise<void> {
  const items: any[] = await sp.web.lists.getByTitle("Department").items();
  const columns = [
    {
      title: "Title",
      dataIndex: "Title",
      sorter: (a, b) => a.Title.localeCompare(b.Title),
    },
    {
      title: "Number of People",
      dataIndex: "NumberOfPeople",
      sorter: (a, b) => a.NumberOfPeople - b.NumberOfPeople,
    },
    {
      title: "Description",
      dataIndex: "Description",
      sorter: (a, b) => a.Description.localeCompare(b.Description),
    },
  ];
  this.setState({ columns, data: items });
}

⚡ Add Filtering and Sorting

You can enable sorting and filtering directly through Ant Design props:

handleChange = (pagination, filters, sorter) => {
  console.log("Various parameters", pagination, filters, sorter);
  this.setState({
    filteredInfo: filters,
    sortedInfo: sorter,
  });
};

🧱 Update State and Export Component

export default class SpFxAntTable extends React.Component<ISpFxAntTableProps, ISpFxAntTableState> {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      filteredInfo: null,
      sortedInfo: null,
    };
  }

  public render(): React.ReactElement<ISpFxAntTableProps> {
    const { data, columns } = this.state;
    return <Table columns={columns} dataSource={data} onChange={this.handleChange} />;
  }
}

🚀 Build and Deploy the Solution

Once implementation is complete, build and deploy the SPFx solution:

gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog and deploy the solution.
You can then add the web part to any modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:SPFx Ant Design Table Sample

GitHub

✅ Summary

Using Ant Design Table inside SPFx gives you a powerful and flexible grid layout for displaying data.
With built-in pagination, filtering, and sorting support, Ant Design is a great fit for enterprise-grade SharePoint solutions.