Units for specifying width (of a table column) in Antd?

Question

We are using the latest stable version 2 of Antd (and cannot make the jump to version 3 due to version dependency constraints). How do we specify the width of my table columns, ideally to the length of the text in title property? According to the official table component docu, there is the obvious property width for a column. All the documentation says in English is

Property: width

Description: Width of this column

Type: string|number

Default: -

1st part of the question: If I specify only a number, what unit is used? I tried different things, but it does not really look like it is dp as described e.g at What is the default unit for width, height, padding etc in React Native for iOS?

2nd part: If I specify a string, which units can I use? I tried ex, em, and px and none of them seems to work.

The 3rd part of the question: Maybe we overlooked a property of the table tag which overwrites or limits the usage of width is a column?

Any input is appreciated, already the translation of the original documentation to English would help. Or explaining the a related Github issue: 'how to set table columns width? the width property is invalid'.

Thanks for your time in advance - a puzzled Antd newbie.

Flax

Answer 1

From the antd official document:

import { Table } from 'antd';

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  width: '40%',
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  width: '30%',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

const data = [{
  key: 1,
  name: 'John Brown sr.',
  age: 60,
  address: 'New York No. 1 Lake Park',
  children: [{
    key: 11,
    name: 'John Brown',
    age: 42,
    address: 'New York No. 2 Lake Park',
  }, {
    key: 12,
    name: 'John Brown jr.',
    age: 30,
    address: 'New York No. 3 Lake Park',
    children: [{
      key: 121,
      name: 'Jimmy Brown',
      age: 16,
      address: 'New York No. 3 Lake Park',
    }],
  }, {
    key: 13,
    name: 'Jim Green sr.',
    age: 72,
    address: 'London No. 1 Lake Park',
    children: [{
      key: 131,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 2 Lake Park',
      children: [{
        key: 1311,
        name: 'Jim Green jr.',
        age: 25,
        address: 'London No. 3 Lake Park',
      }, {
        key: 1312,
        name: 'Jimmy Green sr.',
        age: 18,
        address: 'London No. 4 Lake Park',
      }],
    }],
  }],
}, {
  key: 2,
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];

// rowSelection objects indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

ReactDOM.render(
  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />
, mountNode);

Longcloth

I know that and I saw the percentage sign, but is that really the only possible way of specifying width? If I use percentages, I run into a trouble with header formatting - a solution the client did not like too much. – Flax

No, you can set that to any valid width value... codepen.io/pen/?&editable=true&editors=001 this is the codepen from antd. Try changing the value width volumes. You can set it to 400, "400", "400px", "5em"... whatever. – Longcloth

That codepen link does not work... If in the official document where that code is present that i pasted... You can just click the codepen link in the upper right of that code snippet to open it up. – Longcloth

Thanks for the confirmation - so it really looks like the width I am specifying is overwritten by something. If you could integrate your comments in your answer, I will accept the answer. – Flax

Answer 2

You can wrap you cell in columns with a container and add style of width like this

const columns: TableProps<RecordType>['columns'] = [
  {
    title: 'Column 1',
    render(_value, record) {
      // Wrapper for cell of column 
      return <div style={{ width: '100px' }}>{record?.name}</div>;
    },
  },
];

return (
  <Table<RecordType>
    columns={columns}
    dataSource={dataSource}
  />
);

Hardej