Ant Design Table Row Example: Height, Background Color, and onClick

Ant Design Table Rows can be styled by targeting classes built-in to Ant Design tables. This makes height, font size, background color, and more styling easy to control.

We can also quickly apply row click handlers using the onRow prop. Inside this prop we have access to row data, index, and event objects.

Here is the example table we will create:

Ant Design Table Row Height, Font Size, and Background Color on Every Other Row

We can see in the DOM that the Ant Design Table has some default classes:

We can use the ant-table-row class to apply height and font size:

.ant-table-row {
  font-size: 20px;
  height: 64px;
}

This class can also be used to apply background color if we wanted the same background color on every row. However, I wanted background color to alternate rows. I used the nth-child selector to accomplish this:

.ant-table-tbody .ant-table-row:nth-child(even) {
  background-color: gray;
}

Ant Design table column size can be customized in a similar way, and so can icon buttons.

These classes are in the my css file and simply override the existing Ant Design classes.

Here’s how to set row height on an MUI Table.

Ant Design Table Row Hover Color

Hover color was difficult to apply properly to the rows because it kept getting overridden by the default Ant Design hover styling.

Initially I tried the following code to apply hover to a row:

.ant-table-row:hover {}

This would apply hover styling for an instant but then it would disappear. In the screenshot below I captured the classes and styling applied by Ant Design on hover:

This removed any background color I applied. I needed to override the default hover styling applied by Ant Design. Here’s the code:

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background-color: lightgray;
}

This is a copy-paste from dev tools, but then I applied the background color I wanted. Copying from dev tools is a good trick for overriding styling.

Ant Design Select component’s can have custom rows as well.

Ant Design Table Row onClick

Adding a click handler for a row in an Ant Design table is simple, which means the Ant Design team did a good job.

I simply needed to add the following prop and code to my Table component:

onRow={(record, index) => {
  return {
    onClick: (event) => {
      console.log(record);
    }
  };
}}

Now we can log the data for each row, the index of the clicked row, and the event object.

Resources

Here is the full code for this tutorial:

//custom-table.css

.ant-table-tbody .ant-table-row:nth-child(even) {
  background-color: gray;
}

.ant-table-row {
  font-size: 20px;
  height: 64px;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background-color: lightgray;
}


//custom-table.tsx

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

interface DataType {
  key: string;
  person: string;
  place: string;
  thing: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "Row",
    dataIndex: "key",
    width: 150,
    key: "key"
  },
  {
    title: "Person",
    dataIndex: "person",
    key: "person",
    width: "10rem"
  },
  {
    title: "Place",
    dataIndex: "place",
    key: "place"
  },
  {
    title: "Thing",
    dataIndex: "thing",
    key: "thing",
    width: "20%"
  }
];

const data: DataType[] = [
  {
    key: "1",
    person: "Jon",
    place: "Beach",
    thing: "Shovel"
  },
  {
    key: "2",
    person: "Jane",
    place: "Airport",
    thing: "Plane"
  },
  {
    key: "3",
    person: "Jennifer",
    place: "Hotel",
    thing: "Elevator"
  },
  {
    key: "4",
    person: "Dave",
    place: "Restaurant",
    thing: "Food"
  },
  {
    key: "5",
    person: "Jose",
    place: "Park",
    thing: "Dog"
  },
  {
    key: "6",
    person: "Anne",
    place: "Disco",
    thing: "Shoes"
  }
];

const CustomTable: React.FC = () => {
  return (
    <Table
      columns={columns}
      dataSource={data}
      onRow={(record, index) => {
        return {
          onClick: (event) => {
            console.log(record);
          }
        };
      }}
    />
  );
};

export default CustomTable;