【问题标题】:How to change the width of table column in DataTable of react-native-paperreact-native-paper的DataTable中如何改变表格列的宽度
【发布时间】:2020-10-14 07:43:58
【问题描述】:

默认情况下,列是排列的,如果我尝试为单元格和标题指定宽度,结果没有变化。那么如何明确地安排列宽呢?

  <DataTable style={{ height: height }}>
        <DataTable.Header>
            <DataTable.Title>Name</DataTable.Title>
            <DataTable.Title numeric>QTY</DataTable.Title>
            <DataTable.Title numeric>AMT</DataTable.Title>
            <DataTable.Title numeric>TAX</DataTable.Title>
            <DataTable.Title numeric>GROSS</DataTable.Title>
        </DataTable.Header>
        <ScrollView>
            {
                data && data.length > 0 ?
                    data.map((item, index) => {
                        return (
                            <DataTable.Row key={index}>
                                <DataTable.Cell>{item.NAME}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.QTY}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.AMT}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.TAX}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.GROSS}</DataTable.Cell>
                            </DataTable.Row>
                        );
                    })
                    :
                    false
            }
        </ScrollView>
    </DataTable>

【问题讨论】:

    标签: react-native react-native-paper


    【解决方案1】:

    您可以通过设置flex 值来设置特定单元格的宽度。

    例如:

     <DataTable.Cell style={{flex: 3}}>
    

    【讨论】:

    • 我们可以添加水平滚动条吗,因为有 5 列,我希望第一列作为 flex 5,所以结束列显示为 ...?
    • 我认为你必须用水平滚动视图来包裹它,但实际上并没有尝试。
    • 好吧,我工作不正常,我已经用水平和另一个滚动条包裹了整个表格@Wojtek
    • 不幸的是,我们在 Paper 中尚不支持该功能,对此的快速解决方法是摆脱 DataTable 并使用带有单元格和标题等子组件的 ScrollView :(
    猜你喜欢
    • 2022-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多