Have ideas to improve npm?Join in the discussion! »

    react-table-view

    1.1.1 • Public • Published

    react-table-view

    npm version

    react-table-view is a simple table-view component using react.

    Installation

    yarn add react-table-view

    Usage

    import TableView from 'react-table-view'
    import ReactDOM from 'react-dom'
    import React, { Component } from 'react'
     
    class TestComponent extends Component {
      render() {
        /* must ensure all of your fields have values */
        const DATA = [
          { id: 0, make: 'Honda', model: 'NSX', year: '1997' },
          { id: 1, make: 'Toyota', model: 'Supra', year: '1996' },
          { id: 2, make: 'Nissan', model: '300ZX', year: '1998' }
        ]
        /* define the look of each column, OPTIONAL */
        let COLUMNS = {
          make: function(data) {
            return <span>What an awesome year: {data.year}</span>
          },
          model: function(data) {
            return <a>{data.model}</a>
          },
          year: function(data) {
            return (
              <p style={{textAlign: 'left', margin: '0 4px'}}>
                {`Id: ${data.id}`}
                <br />
                {`Year: ${data.year}`}
              </p>
            )
          }
        }
     
        return (
          <div>
            <TableView data={DATA} columns={COLUMNS} />
          </div>
        )
      }
    }
     
    ReactDOM.render(<TestComponent />, document.getElementById('root'))

    Styles

    react-table-view uses uses styled-components 💅 for the base styling.

    Development

    yarn
    yarn dev
    

    Test

    yarn test
    

    Build

    yarn
    yarn build
    

    Publish

    npm login
    npm version patch
    git add -A
    git push origin master
    npm publish
    

    License

    MIT

    Install

    npm i react-table-view

    DownloadsWeekly Downloads

    46

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    1.05 MB

    Total Files

    12

    Last publish

    Collaborators

    • avatar