Normal Programming Mistake

    blotter

    2.1.0 • Public • Published

    React-Blotter

    SemVer License Build Status

    Renders a react based blotter - a table presenting data. The table header and columns are defined using the columnConfig configuration object.

    Install

    Install as node dependency:

    npm install blotter --save
    

    Usage

    ReactDOM.render(React.createElement(Blotter, {
      columnConfig: {
        type: {
          header: 'Type',
          className: 'type'
        },
        time: {
          className: 'time maturity',
          header: DOM.span({ style: { color: 'green' } }, 'Time'),
          markup(row) {
            return DOM.div({ className: 'value' }, row.time);
          }
        },
        client: {
          className: 'client',
          header: 'Client',
          markup(row) {
            return DOM.div({ className: 'value' }, row.client);
          }
        },
        action: {
          className: 'action',
          header: 'Action',
          markup(row, props) {
            return DOM.button({
              onClick: props.onDelete.bind(this, row.tradeId)
            }, 'delete');
          }
        },
        details: {
          className: 'details',
          header: 'Details',
          markup(row, props) {
            return DOM.button({
              onClick: props.onShowDetails.bind(this, row.tradeId)
            }, 'show details');
          }
        }
      },
      formatRow
      data: [{
          tradeId: 0,
          type: 'Spot',
          maturity: '2016-04-04T13:10:53+02:00',
          client: 'Thomas Junghans'
        }, {
          tradeId: 1,
          type: 'Forward',
          client: 'Max Muster'
        }
      ],
      onDelete(tradeId) {
        deleteRow(tradeId);
      },
      onShowDetails() {
        console.log('showing details for ', this.props.data.tradeId);
      }
    }), document.querySelector('#blotter'));
     

    Properties

    • columnConfig: an object containing header and column information. The following properties are possible:
      • header: String, table column header value
      • className: className that is added to th and td elements
      • markup(row, props): function, if set will be used to render an element into the td element. row is an item of data. props is a reference, to the row component's react props.
      • columns: object with columns.
    • formatRow(row): function used to format row data
    • data: an array of data to display

    You can give a row a css class value by including the property rowClassName in the returned obect of formatRow(row) or by already having it on data[index].

    All properties are passed to the row component and made available to the columnConfig, markup function.

    Run local demo

    npm start & npm run watch
    
    • npm run build - build production css and js
    • npm run watch - compile css and js
    • npm start - start static dev server

    License

    MIT

    Install

    npm i blotter

    DownloadsWeekly Downloads

    7

    Version

    2.1.0

    License

    none

    Last publish

    Collaborators

    • tangiblej