sheldonwr-list

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