ReactDashGrid

Exeprimental React library to use table.

Installation

The easiest way to use react-dash-grid is to install it from npm.

npm install --save react-dash-grid

Then, you can import ReactDashGrid component in your app.

import ReactDashGrid from 'react-dash-grid';

How to use?

Below is an example to show how you can use ReactDashGrid.

import React, { Component } from 'react';
import ReactDashGrid from 'react-dash-grid';
import Email from '../components/Email';
import Image from '../components/Image';

const columns = [
  // `key` holds unique identifier for column, when passing row this key
  // connects the row value with the column
  { key: 'id', name: 'ID' },
  // `isValid` value is validator, for this column value. Before rendering email
  // this will check if the value is valid or not. If not valid, it'll not show
  // the value
  { key: 'email', name: 'Email', isValid: Email.isValid },
  // `renderer` allows you to use your component to render complex values, here
  // `Image` component takes care of rendering the image
  { key: 'image', name: 'Profile Pic', renderer: (props) => (
    <Image {...props}/>
  )},
];

class App extends Component {
  render() {
    return (
      <div className="App">
        <ReactDashGrid
          columns={columns}
          rows={[
            { id: 1, email: '[email protected]', image: {src: 'https://example.com/abc.jpg'}}
          ]}
        />
      </div>
    );
  }
}

export default App;

Customizing styles

You can pass class names for each components with classes property or you can use styles props to add custom styles. These two props accept an object as value and you can set following keys:

• table - for root level element
• theadRow - for header row
• theadCell - for header cell
• row - for data row
• cell - for data cell

In case you want to set custom styles for cell, you can still do it using renderer property of column.

Below is an exaple how you can pass classes. Let's assume you are using @material-ui/core to create classes then:

import React, { Component } from 'react';
import ReactDashGrid from 'react-dash-grid';
import Email from '../components/Email';
import Image from '../components/Image';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  table: {
    width: '100%'
  },
  theadRow: {
    fontWeight: 'bold'
  }
});

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'email', name: 'Email', isValid: Email.isValid },
  { key: 'image', name: 'Profile Pic', renderer: (props) => (
    <Image {...props}/>
  )},
];

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className="App">
        <ReactDashGrid
          columns={columns}
          rows={[
            { id: 1, email: '[email protected]', image: {src: 'https://example.com/abc.jpg'}}
          ]}
          classes={{
            table: classes.table,
            theadRow: classes.theadRow
          }}
        />
      </div>
    );
  }
}

export default withStyles(styles)(App);

If you want to pass CSS styles directly, you can do something like below:

import React, { Component } from 'react';
import ReactDashGrid from 'react-dash-grid';
import Email from '../components/Email';
import Image from '../components/Image';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'email', name: 'Email', isValid: Email.isValid },
  { key: 'image', name: 'Profile Pic', renderer: (props) => (
    <Image {...props}/>
  )},
];

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className="App">
        <ReactDashGrid
          columns={columns}
          rows={[
            { id: 1, email: '[email protected]', image: {src: 'https://example.com/abc.jpg'}}
          ]}
          styles={{
            table: {
              width: '100%'
            },
            theadRow: {
              fontWeight: 'bold'
            }
          }}
        />
      </div>
    );
  }
}

export default App;