ParaViewWeb

EditableListWidget

Live example

Source

// Load CSS
import 'normalize.css';
import 'font-awesome/css/font-awesome.css';

import React from 'react';
import ReactDOM from 'react-dom';

import EditableListWidget from '..';

const container = document.querySelector('.content');

const columns = [
  {
    key: 'name',
    dataKey: 'name',
    label: 'Name',
    // className: 'fancyNameClass',
    render: (name) => <span style={{ fontStyle: 'italic' }}>{name}</span>,
  },
  {
    key: 'age',
    dataKey: 'age',
    label: 'Age',
  },
  {
    key: 'gender',
    dataKey: 'gender',
    label: 'Gender',
  },
];

const data = [
  {
    name: 'Wayne',
    age: 28,
    gender: 'male',
  },
  {
    name: 'Deborah',
    age: 45,
    gender: 'female',
  },
  {
    name: 'Nicole',
    age: 22,
    gender: 'female',
  },
  {
    name: 'Carlos',
    age: 31,
    gender: 'male',
  },
];

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data,
    };

    this.onAdd = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
    this.onSortChange = this.onSortChange.bind(this);
  }

  onAdd(idx) {
    const newData = this.state.data.slice();
    newData.splice(idx, 0, {
      name: 'New Name',
      age: '0',
      gender: 'something',
    });
    this.setState({ data: newData });
  }

  onDelete(key) {
    const newData = this.state.data.slice();
    newData.splice(key, 1);
    this.setState({ data: newData });
  }

  onSortChange(src, dst) {
    const newData = this.state.data.slice();
    newData.splice(dst, 0, ...newData.splice(src, 1));
    this.setState({ data: newData });
  }

  render() {
    const keyedData = this.state.data.map((item, idx) =>
      Object.assign({ key: idx }, item)
    );

    return (
      <EditableListWidget
        sortable
        columns={columns}
        data={keyedData}
        onAdd={this.onAdd}
        onDelete={this.onDelete}
        onSortChange={this.onSortChange}
      />
    );
  }
}

ReactDOM.render(<Example />, container);

document.body.style.margin = '10px';