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?

Answer 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;
}