[英]Units for specifying width (of a table column) in Antd?
We are using the latest stable version 2 of Antd (and cannot make the jump to version 3 due to version dependency constraints).我们正在使用Antd的最新稳定版本 2(由于版本依赖限制,无法跳转到版本 3)。 How do we specify the width of my table columns, ideally to the length of the text in
title
property?我们如何指定表格列的宽度,最好是
title
属性中文本的长度? According to the official table
component docu , there is the obvious property width
for a column
.根据官方
table
组件文档, column
有明显的属性width
。 All the documentation says in English is所有用英文写的文件是
Property: width
属性:宽度
Description: Width of this column
描述:此列的宽度
Type:
string|number
类型:
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 eg at What is the default unit for width, height, padding etc in React Native for iOS?我尝试了不同的东西,但它看起来不像是
dp
,例如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.我尝试了
ex
、 em
和px
,但它们似乎都不起作用。
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?问题的第三部分:也许我们忽略了
table
标签的一个属性,它覆盖或限制了width
的使用是一列?
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?
或者解释一个相关的Github 问题:'如何设置表格列宽? the width property is invalid' .
宽度属性无效' 。
Thanks for your time in advance - a puzzled Antd newbie.提前感谢您的时间 - 一个困惑的 Antd 新手。
From the antd official document:来自antd官方文档:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.