React Tabulator - How to display table horizontally

Question

I'm using react-tabulator for a component: http://tabulator.info/docs/4.0/frameworks

I have put the component on the page in my app but am struggling to do anything with the styling. Right now, the component just displays everything vertically and looks really bad:

I want to display this horizontally in something that looks like a normal tabular format. I would also like to change column width. I've found limited documentation examples. Someone did ask a similar question and in this StackOverflow thread: How to style react-tabulator table? but I've not been able to edit the styles.css stylesheet to do anything useful.

Here is my component code:

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

The css in react-tabulator/lib/styles.css is just the most base-level css.

Try importing one of the pre-built themes:

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

There are a whole bunch of them in the css folder, and you can use them as a basis for creating your own.

Minimum working example here.