React Tabulator - 如何水平显示表格答案

【问题标题】：React Tabulator - How to display table horizontallyReact Tabulator - 如何水平显示表格
【发布时间】：2021-04-19 18:13:17
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs tabulator

【解决方案1】：

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

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

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

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

Minimum working example here.

【讨论】：

【解决方案2】：

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

您的导入应该如下所示：

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 中，您可以找到更多主题。

【讨论】：