text: function _extends() {
    _extends =
      Object.assign ||
      function(target) {
        for (var i = 1; i < arguments.length; i++) {
          var source = arguments[i];
          for (var key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
              target[key] = source[key];
            }
          }
        }
        return target;
      };
    return _extends.apply(this, arguments);
  }
  
  import React from 'react';
  import { Grommet, Box, DataTable } from 'grommet';
  import { grommet } from 'grommet/themes'; // Source code for the data can be found here
  // https://github.com/grommet/grommet/blob/master/src/js/components/DataTable/stories/data.js
  
  import { columns, DATA } from './data';
  export var Sort = function Sort() {
    var _React$useState = React.useState({
        property: 'name',
        direction: 'desc',
      }),
      sort = _React$useState[0],
      setSort = _React$useState[1];
  
    return /*#__PURE__*/ React.createElement(
      Grommet,
      {
        theme: grommet,
      },
      /*#__PURE__*/ 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,
        }),
      ),
    );
  };
  export default {
    title: 'Visualizations/DataTable/Sort',
  };
  