react-table-vertical-heading

A React component rendering a table with vertical heading with the ability to add new columns

Examples

To try this component, clone this repo and run:

npm install
npm start

Usage

import React, { Component } from 'react';
import VerticalTable from 'react-table-vertical-heading';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      heading: [],
    }

  }

  componentDidMount() {
    const heading = [
      {
        header: 'first row',
        columns: ['first column', 'second column'],
      },
      {
        header: 'second row',
        columns: ['first column', 'second column'],
      },
      {
        header: 'third row',
        columns: ['first column', 'second column'],
      },
    ]
    

    this.setState({
      heading,
    })
  }


  render() {
    return(
            <VerticalTable 
              heading={this.state.heading}
              editable={true}
            />
    )
  }
}

Props

Property	Type	Default	Description
heading	array	[{ header: 'first heading' },{ header: 'second heading' },{ header: 'third heading' }]	An array defining the headings, and if you want to define your own columns, you can add columns to every object as in the Usage section
editable	boolean	true	you can set editable to true to make the table editable and allow columns addition, otherwise the table will be generated with the heading array you pass to the component