Wondering what’s next for npm?Check out our public roadmap! »

react-tabular-grid

1.0.1 • Public • Published

badge badge badge badge badge

Welcome to the react-tabular-grid package documentation

About the package

The package is a headless package, this means you get a component without any spectacular styles, but also you get a smaller package, any way you probably you are going to apply your specific styles

At Proppos we needed a package to display datasets with some specific features, after some research, we decided to create the package we needed and share it with the world because the existing ones won't with our needs.

Package requirements

The package makes use of useState and useEffect React hooks, and it's required a React 16.8.0 or superior, is recommended to use the latest 16x version available.

Installing the package

npm i --save react-tabular-grid

Basic usage

The first thing you want to do is import the basic stiles that come with the package, the file weights under 3kb and only adds the required styles that makes the component work as intended.

If you plan to use the component on a single page you can add the import to that specific page, but if you a re planning to use it along the application is probably better importing it in the entry point of the application, so you don't need to worry about it anymore.

import 'react-tabular-grid/lib/main.css';

Now is time for the real magic to happen.

import { SAMPLE_RESTAURANT_DATA } from './sampleData';
import ReactTabularGrid from 'react-tabular-grid';
 
export default function App() {
    function renderCustomCell(data) {
        return <button onClick={() => { console.log(data); alert(JSON.stringify(data)); }}>Click me</button>;
    }
 
    return (
        <ReactTabularGrid
            data={SAMPLE_RESTAURANT_DATA}
            options={{
                columns: {
                    name: { path: 'name', lock: true },
                    neighborhood: 'neighborhood',
                    cuisine_type: { path: 'cuisine_type', lock: false },
                    monday: 'operating_hours.Monday',
                    rating1Week: { path: 'reviews.0.rating', label: 'Average ratings 1 week' },
                    rating1Month: { path: 'reviews.1.rating', label: 'Average ratings 1 month' },
                    rating1Year: { path: 'reviews.2.rating', label: 'Average ratings 1 year' },
                    custom: { label: 'Custom column', renderContent: renderCustomCell },
                },
            }}
        />
    );
}

Component props

Prop Type Description
data Array The data prop is an array of objects where the component needs to iterate to show the data
options Object The options prop is an object containing all the required configuration of the package

Options

Option Type DefaultValue Description
columns Object - An object containing all the relative configuration of the dataset columns
applyHiddenFilters Boolean true Determines the behaviour of the filters when a column is hidden, by default
dateFormat String DD/MM/YYYY hh:mm:ss Format applied to all the columns of type 'date'
icons Object - An object containing the icons configurations

Install

npm i react-tabular-grid

DownloadsWeekly Downloads

55

Version

1.0.1

License

MIT

Unpacked Size

123 kB

Total Files

10

Last publish

Collaborators

  • avatar