如何改变react-native-paper的DataTable中表格列的宽度

Question

默认情况下，列是排列的，如果我尝试为单元格和标题指定宽度，结果不会发生变化。那么如何明确地安排列宽呢？

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

Answer 1

您可以通过设置

flex

值来设置特定单元格的宽度。

例如：

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

Answer 2

要添加滚动条，您需要将 Header 和 Row 水平包裹在 ScrollView 中，并编辑单元格的宽度，只需添加 style={{width: 100}}

<ScrollView horizontal contentContainerStyle={{flexDirection: 'column'}}>
            <DataTable.Header>
                {
                    columns.map((column, key) => (
                        <DataTable.Title style={{width: column.width ?? 100}}>{column.headerName}</DataTable.Title>
                    ))
                }
            </DataTable.Header>

            {items.slice(from, to).map((item) => (
                <DataTable.Row key={item.key}>
                    {
                        columns.map((column, key) => (
                            <DataTable.Cell style={{width: column.width ?? 100}}>{item[column.field]}</DataTable.Cell>
                        ))
                    }
                </DataTable.Row>
            ))}
        </ScrollView>