Generic React list component

Installation

npm install sheldon-list

Example

import React from 'react';
import { render } from 'react-dom';

import List from './list.js';

let url = '/mock/users.json';

let App = React.createClass({
  render() {
    let headers = [
      {headerName: '序号', data: 'id', sortable: true, class: 'id-class'},
      {headerName: '操作', buttons:[{text: '修改', handler: this.modifyHandler}, {text: '删除', handler: this.deleteHandler}]}
    ];
    return (
      <List headers={headers} url={url} tableClass='m-base-table m-table-1 m-table-box-line'></List>
    );
  },

  modifyHandler() {
    console.log('modified');
  },
  deleteHandler() {
    console.log('deleted');
  }
});


render(<App />, document.getElementById('homepage'));

Parameters

|params |type |properties|description | |----------|------|----------|-------------------------------------------| |headers |Object|headerName|the title of the columns | | | |data |the key to determine which value to display| | | |sortable |if data can be sorted by this column | | | |class |css class the td refers to | | | |buttons |buttons in operation column. | | | | |text: button text | | | | |handler: handler for click event | |url |String| |the url to fetch data of the list | |tableClass|String| |classes the list refers to |