How to Set Ant Design Table Column Width (3 Ways!)

Ant Design is currently the second largest React component library, and it was created to reduce design waste and friction. In this tutorial, we will explore customizing table column width using column object fields, custom classes, and class overrides.

We will build this simple table where each column’s width is set differently.

Full code for this example is in the Resources section.

Ant Design Table Column Width Field

The simplest method for setting column width is the width prop on the column object. It can accept a number or string. Here are examples of values that I passed to the column width field:

• 150
• “10rem”
• “20%”

These all work properly to style column width. Interestingly, I don’t see these values applied via classes or inline styling in dev tools. In the example below, I show a screenshot of the first column which has a total width of 150 but dev tools does not show the styling:

Despite not seeing how the style is applied when dev tools is open, the width is reliably applied. It acts as a max width and the column width may shrink if there is not enough viewport space to show the whole table at the specified widths.

Ant Design Table Column Width Class Override

The Ant Design Table component comes with many default classes. These can be overridden with a selector in the .css or .less file.

I added the following selector to my table.less file:

.ant-table-tbody > tr > td {
  padding: 8px;
}

I found this selector by opening dev tools and exploring the table element DOM.

Notice how .ant-table-tbody > tr > td is in the styles section twice. Ant Design made it remarkably easy to customize this class. I didn’t have to make my selector more specific than the default selector.

I did not update the width directly, but instead I changed the table cell padding. The padding is factored into the total width.

If you want to set a consistent column width for all columns, an overriding class may be the easiest method. It can also be used to set table row height.

Ant Design Table Column Width Custom Class

The least reliable way to apply width is rendering a component in the column and applying a width to the component with a class.

I rendered the Place column as a Space component with the place text. I added a class to the Space component that set the width of the space component.

However, if the table was larger than needed, it chose to expand the Place column’s width since the width was not set directly on the table column. I believe it had lower authority since the width was set on an internal component.

Resources

Here are the Ant Design table docs.

Take a look at this Material UI table tutorial as an alternative to the Ant Design table.

The Ant Design Select can also be customized, I injected Checkboxes into it.

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Space, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import "./table.less";

interface DataType {
  key: string;
  name: string;
  place: string;
  city: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "Row",
    dataIndex: "key",
    width: 150,
    key: "key"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: "10rem",
    render: (text) => <a>{text}</a>
  },
  {
    title: "Place",
    dataIndex: "place",
    key: "place",
    render: (text) => {
      return <Space className="column-custom">{text}</Space>;
    }
  },
  {
    title: "City",
    dataIndex: "city",
    key: "city",
    width: "20%"
  }
];

const data: DataType[] = [
  {
    key: "1",
    name: "Mr. Freeze",
    city: "New York",
    place: "Park"
  },
  {
    key: "2",
    name: "Poison Ivy",
    place: "Dungeon",
    city: "Star City"
  },
  {
    key: "3",
    name: "Scarecrow",
    place: "Business",
    city: "Gotham"
  }
];

const App: React.FC = () => <Table columns={columns} dataSource={data} />;

export default App;

//table.less
.column-custom {
  width: 120px;
}

.ant-table-tbody > tr > td {
  padding: 8px;
}