React Tabulator - How to display table horizontally

user_9305645 0
Viewed 278

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:

enter image description here

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
tabulator reactjs
2 Answers

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.

user_29722730

To get the right styling you will also have to import tabulator.min.css in your module, which is the theme, according to here.

Your imports should look like this:

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

Without it, it looks like the image you posted:

wrong view

With it, it looks like this:

right view

In the folder node_modules/react-tabulator/css you can find more themes.

More themes

user_22884760
Related