How to customize table row height in Antd?

Question

Antd comes with a nices table component, but I cannot find anything in the docs about how to configure the "density" of the table, i.e., the default height of a table row, and maybe the font size as well.

By default the table has a spacey layout:

I have a use case that requires more smaller/dense rows (think of the density in typical spreadsheet programs like Excel).

I'm new to Antd, and I have no idea where to start. Do I need to customize Antd's CSS? What would be the right mechanism to achieve it, configuring heights on cell or row level, or rather messing with the padding? I was opting for Antd because I was hoping things like these don't require much CSS knowledge, am I missing something?

Solution 1

You can style your Tag from css. if you want to style antd table, then you should target antd classes.

const columns =[
...
{
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag} className="my-tag">
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
...
]

css

/* table */
.ant-table {
  font-size: 9px;
}

/* row data */
.ant-table-tbody > tr > td {
  height: 5px;
  padding: 4px;
}
/* row tags */
.my-tag {
  font-size: 12px;
}
.ant-table-thead > tr > th {
  height: 5px;
  padding: 4px;
}

Solution 2

I have same problem here, and based on @blueseal answer, I did my line height with Styled-Components this way!

My JSX

 <MyTable rowKey="id" dataSource={list} columns={columns} /> 

MY CSS

import { Table } from 'antd'

export const MyTable = styled(Table)`
  tbody {
    tr {
      td {
        height: 5px;
        padding: 4px;
      }
    }
  }
`

I hope help someone!

Solution 3

In the Ant-Design documentation you can find the way to change the size and appearance of the tables:

For example:

ReactDOM.render(
  <div>
    <h4>Middle size table</h4>
    <Table columns={columns} dataSource={data} size="middle" />
    <h4>Small size table</h4>
    <Table columns={columns} dataSource={data} size="small" />
  </div>,
  mountNode,
);

The correct way to do it is by adding the size attribute which has middle and small as parameters. This detail only works in tables arranged within Modals, otherwise preferably not use the included classes for responsive design and add custom css modifiers. For example, I am creating a payroll system where I apply Ant-Design, in the Employees table I show it using the responsive css classes as shown in the documentation:

And I apply the attribute size = "small" for the tables in the modals dialog:

Hoping that this knowledge will be of use to you.