React Tabulator - 如何水平显示表格

如何解决React Tabulator - 如何水平显示表格

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

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

我想以一种看起来像普通表格格式的方式水平显示它。我也想改变列宽。我发现了有限的文档示例。有人确实问过类似的问题，在这个 StackOverflow 线程中：How to style react-tabulator table? 但我无法编辑 style.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

解决方法

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

尝试导入预构建的主题之一：

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

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

Minimum working example here.

,

要获得正确的样式，您还必须在您的模块中导入 tabulator.min.css，根据 here，它是 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 中，您可以找到更多主题。