How to customize table row height in Antd?

user_1804173 0
Viewed 21230

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:

enter image description here

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?

antd reactjs css
4 Answers

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

antd-table-styles

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

Edit so-61044628-table-row-height-change

user_51244880

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!

user_58122700

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

enter image description here

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:

enter image description here

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

enter image description here

Hoping that this knowledge will be of use to you.

user_51986490

@Jorge Pirela solution solves the problem. Just add the size attribute inside the table component as seen below

 <Table columns={columns} dataSource={data} size='small'/>
user_122347190
Related