React Tabulator - 如何水平显示 table

Question

我正在使用 react-tabulator 作为组件：http://tabulator.info/docs/4.0/frameworks

我已将组件放在我的应用程序的页面上，但很难对样式进行任何处理。现在，该组件只是垂直显示所有内容，看起来非常糟糕：

我想以看起来像普通表格格式的方式水平显示它。我还想更改列宽。我找到了有限的文档示例。有人确实问了一个类似的问题，在这个 Whosebug 线程中：但我无法编辑 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

Answer 1

react-tabulator/lib/styles.css中的css只是最基础的css。

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

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

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

Minimum working example here.

Answer 2

根据 here.

，要获得正确的样式，您还必须在模块中导入 tabulator.min.css，即 theme

您的导入应如下所示：

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

没有它，看起来像您发布的图片：

有了它，它看起来像这样：

在文件夹 node_modules/react-tabulator/css 中您可以找到更多主题。

React Tabulator - 如何水平显示 table

React Tabulator - How to display table horizontally

reactjs

tabulator