reactjs - React Tabulator - 如何水平显示表格

Question

我将 react-tabulator 用于组件：http ://tabulator.info/docs/4.0/frameworks

我已将组件放在我的应用程序的页面上，但我正在努力对样式做任何事情。现在，该组件只是垂直显示所有内容，看起来非常糟糕：

我想以看起来像普通表格格式的方式水平显示它。我也想改变列宽。我发现有限的文档示例。有人确实问过类似的问题，并且在这个 StackOverflow 线程中：如何设置 react-tabulator 表的样式？但我无法编辑styles.css 样式表来做任何有用的事情。

这是我的组件代码：

import React from 'react'
import { ReactTabulator } from 'react-tabulator'
import 'react-tabulator/lib/styles.css';


const TabularData = (props) => {

    const dataArray = []

    //gets just first streelights record
    for (const [i, v] of props.streetlights.features.entries()) {
        if (i < 1) {
            dataArray.push(v.properties);    // properties of each item is what contains the info about each streetlight 
        }   
    }


    let columns = [
        {title:"WORKLOCATI", field:"WORKLOCATI"},
        {title:"WORKREQUES", field:"WORKREQUES"},
        {title:"WORK_EFFEC", field:"WORK_EFFEC"},
        {title:"WORK_REQUE", field:"WORK_REQUE"},
    ]

    return (
        <ReactTabulator
            columns={columns}
            layout={"fitData"}
            data={dataArray}
        
        />
    )
}

export default TabularData

标签： reactjstabulator

Answer 1

里面的 cssreact-tabulator/lib/styles.css只是最基础的 css。

尝试导入其中一个预建主题：

import "react-tabulator/css/bootstrap/tabulator_bootstrap.min.css";

在 css 文件夹中有一大堆它们，您可以将它们用作创建自己的基础。

这里的最小工作示例。