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.

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