grommet/es6/components/DataTable/stories/Sort.stories.js

focus on the essential experience

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { Box, DataTable } from 'grommet';
import { columns } from './data';

// This story uses intentionally-messy values (e.g. mixed case)
// to demonstrate case-insensitive sorting
var DATA = [{
  name: 'zoey',
  location: '',
  date: '',
  percent: 0,
  paid: 0
}, {
  name: 'aaron',
  location: '',
  date: '',
  percent: 0,
  paid: 0
}, {
  name: 'Zelda',
  location: '',
  date: '',
  percent: 0,
  paid: 0
}, {
  name: 'Alan',
  location: '',
  date: '',
  percent: 0,
  paid: 0
}, {
  name: 'Bryan',
  location: 'Fort Collins',
  date: '2018-06-10',
  percent: 30,
  paid: 1234
}, {
  name: 'Chris',
  location: 'Palo Alto',
  date: '2018-06-09',
  percent: 40,
  paid: 2345
}, {
  name: 'Eric',
  location: 'Palo Alto',
  date: '2018-06-11',
  percent: 80,
  paid: 3456
}, {
  name: 'Doug',
  location: 'Fort Collins',
  date: '2018-06-10',
  percent: 60,
  paid: 1234
}, {
  name: 'Jet',
  location: 'Palo Alto',
  date: '2018-06-09',
  percent: 40,
  paid: 3456
}, {
  name: 'Michael',
  location: 'Boise',
  date: '2018-06-11',
  percent: 50,
  paid: 1234
}, {
  name: 'Tracy',
  location: 'San Francisco',
  date: '2018-06-10',
  percent: 10,
  paid: 2345
}];
export var Sort = function Sort() {
  var _React$useState = React.useState({
      property: 'name',
      direction: 'desc'
    }),
    sort = _React$useState[0],
    setSort = _React$useState[1];
  return (
    /*#__PURE__*/
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={grommet}>
    React.createElement(Box, {
      align: "center",
      pad: "large"
    }, /*#__PURE__*/React.createElement(DataTable, {
      columns: columns.map(function (c) {
        return _extends({}, c, {
          search: c.property === 'name' || c.property === 'location'
        });
      }),
      data: DATA,
      sort: sort,
      onSort: setSort,
      resizeable: true
    }))
    // </Grommet>
  );
};
export default {
  title: 'Visualizations/DataTable/Sort'
};