lucid-ui/lib/components/DataTable/examples/04.interactive-table.js

A UI component library from AppNexus.

import _reverse from "lodash/reverse";
import _sortBy from "lodash/sortBy";
import _every from "lodash/every";
import _map from "lodash/map";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import createClass from 'create-react-class';
import { DataTable, SuccessIcon } from '../../../index';
export default createClass({
  getInitialState: function getInitialState() {
    return {
      activeIndex: 1,
      currentlySortedField: 'id',
      currentlySortedFieldDirection: 'down',
      data: [{
        id: '01',
        first_name: 'Isaac',
        last_name: 'Newton',
        email: 'inewton@example.com',
        occupation: 'Physicist',
        isSelected: true,
        salary: '$100.01',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '02',
        first_name: 'Albert',
        last_name: 'Einstein',
        email: 'aeinstein@example.com',
        occupation: 'Physicist',
        salary: '$100.02',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '03',
        first_name: /*#__PURE__*/React.createElement("div", null, "Leon ", /*#__PURE__*/React.createElement("div", {
          className: "child"
        }, "The Silly")),
        last_name: 'da Vinci',
        email: 'ldvinci@example.com',
        occupation: 'Engineer',
        salary: '$100.03',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '04',
        first_name: 'Aristotle',
        last_name: '--',
        email: 'aristotle@example.com',
        occupation: 'Tutor',
        salary: '$100.04',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '05',
        first_name: 'Galileo',
        last_name: 'Galilei',
        email: 'ggalilei@example.com',
        occupation: 'Physicist',
        salary: '$100.05',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '06',
        first_name: 'Charles',
        last_name: 'Darwin',
        email: 'cdarwin@example.com',
        occupation: 'Biologist',
        salary: '$100.06',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '07',
        first_name: 'Alexander',
        last_name: 'Macedon',
        email: 'amacedon@example.com',
        occupation: 'Head of State',
        salary: '$100.07',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '08',
        first_name: 'Plato',
        last_name: 'Plato',
        email: 'plato@example.com',
        occupation: 'Philosopher',
        salary: '$100.08',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '09',
        first_name: 'Mahatma',
        last_name: 'Gandhi',
        email: 'mgandhi@example.com',
        occupation: 'Politician',
        salary: '$100.09',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }, {
        id: '10',
        first_name: 'William',
        last_name: 'Shakespeare',
        email: 'wshakespear@example.com',
        occupation: 'Playwright',
        salary: '$100.10',
        status: /*#__PURE__*/React.createElement(SuccessIcon, null)
      }]
    };
  },
  handleSelect: function handleSelect(_item, selectedIndex) {
    var data = this.state.data;
    this.setState({
      data: _map(data, function (row, rowIndex) {
        if (rowIndex === selectedIndex) {
          return _objectSpread(_objectSpread({}, row), {}, {
            isSelected: !row.isSelected
          });
        } else {
          return row;
        }
      })
    });
  },
  handleSelectAll: function handleSelectAll() {
    var data = this.state.data;

    var allSelected = _every(data, 'isSelected');

    this.setState({
      data: _map(data, function (row) {
        return _objectSpread(_objectSpread({}, row), {}, {
          isSelected: !allSelected
        });
      })
    });
  },
  handleRowClick: function handleRowClick(_item, rowIndex) {
    this.setState({
      activeIndex: rowIndex
    });
  },
  handleSort: function handleSort(field) {
    var _this$state = this.state,
        currentlySortedField = _this$state.currentlySortedField,
        currentlySortedFieldDirection = _this$state.currentlySortedFieldDirection,
        data = _this$state.data;
    var nextCurrentlySortedFieldDirection = currentlySortedField === field && currentlySortedFieldDirection === 'up' ? 'down' : 'up';

    var nextData = _sortBy(data, field);

    this.setState({
      currentlySortedField: field,
      currentlySortedFieldDirection: nextCurrentlySortedFieldDirection,
      data: nextCurrentlySortedFieldDirection === 'down' ? nextData : _reverse(nextData),
      activeIndex: null
    });
  },
  render: function render() {
    var _this$state2 = this.state,
        activeIndex = _this$state2.activeIndex,
        data = _this$state2.data,
        currentlySortedField = _this$state2.currentlySortedField,
        currentlySortedFieldDirection = _this$state2.currentlySortedFieldDirection;
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, '.child { display: none; } .lucid-Table-Tr:hover .child { display: block; }'), /*#__PURE__*/React.createElement(DataTable, {
      data: _map(data, function (row, index) {
        return index === activeIndex ? _objectSpread(_objectSpread({}, row), {}, {
          isActive: true
        }) : row;
      }),
      density: "extended",
      isSelectable: true,
      isActionable: true,
      onRowClick: this.handleRowClick,
      onSelect: this.handleSelect,
      onSelectAll: this.handleSelectAll,
      onSort: this.handleSort
    }, /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "id",
      width: 41,
      align: "left",
      hasBorderLeft: true,
      isSortable: true,
      isSorted: currentlySortedField === 'id',
      sortDirection: currentlySortedFieldDirection
    }, "ID"), /*#__PURE__*/React.createElement(DataTable.Column, {
      className: "parent",
      field: "first_name",
      width: 100,
      hasBorderLeft: true,
      hasBorderRight: true,
      isResizable: true,
      isSortable: true,
      isSorted: currentlySortedField === 'first_name',
      sortDirection: currentlySortedFieldDirection
    }, "First"), /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "last_name",
      align: "left",
      width: 100,
      hasBorderRight: true,
      isResizable: true,
      isSortable: true,
      isSorted: currentlySortedField === 'last_name',
      sortDirection: currentlySortedFieldDirection
    }, "Last"), /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "email",
      align: "left",
      isSortable: true,
      isSorted: currentlySortedField === 'email',
      sortDirection: currentlySortedFieldDirection
    }, "E-Mail"), /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "occupation",
      align: "left",
      width: 100,
      hasBorderLeft: true,
      isSortable: true,
      isSorted: currentlySortedField === 'occupation',
      sortDirection: currentlySortedFieldDirection
    }, "Occupation"), /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "salary",
      align: "right",
      width: 100,
      hasBorderLeft: true,
      isSortable: true,
      isSorted: currentlySortedField === 'salary',
      sortDirection: currentlySortedFieldDirection
    }, "Salary"), /*#__PURE__*/React.createElement(DataTable.Column, {
      field: "status",
      align: "center",
      width: 100,
      hasBorderLeft: true
    }, "Status")));
  }
});