@urbanos/react-discovery-ui 2.1.44 → 2.1.46

package/README.md

@@ -5,7 +5,7 @@
 
 React (also known as React.js or ReactJS) is an open-source, front end, JavaScript library for building user interfaces or UI components.
 
-[react_discovery_ui](https://www.npmjs.com/package/@smartcitiesdata/react-discovery-ui) is a UI component for consuming the [Discovery API](https://github.com/Datastillery/smartcitiesdata/tree/master/apps/discovery_api) of the SmartCitiesData platform. It is exported as a React Component, `<ReactDiscoveryUI>`, and can be imported into another site such as seen in [SmartColumbusOS/Discovery_UI](https://github.com/SmartColumbusOS/discovery_ui).
+[react_discovery_ui](https://www.npmjs.com/package/@urbanos/react-discovery-ui) is a UI component for consuming the [Discovery API](https://github.com/Datastillery/smartcitiesdata/tree/master/apps/discovery_api) of the SmartCitiesData platform. It is exported as a React Component, `<ReactDiscoveryUI>`, and can be imported into another site such as seen in [SmartColumbusOS/Discovery_UI](https://github.com/SmartColumbusOS/discovery_ui).
 
 ## What to Install
 
@@ -99,7 +99,7 @@ with `npm run build:library`
 To consume this component in your react app place the <ReactDiscoveryUI> component into your app or other sub-components such as in the below example:
 
 ```
-import ReactDiscoveryUI from '@smartcitiesdata/react-discovery-ui'
+import ReactDiscoveryUI from '@urbanos/react-discovery-ui'
 
 
 export default class App extends Component {
@@ -116,3 +116,9 @@ export default class App extends Component {
 ```
 
 # Trigger a build
+
+The primary way to promote react-discovery-ui code to a production environment is to produce an npmjs release (i.e. publish it to npmjs). Previously (before 2026)
+this was triggered by creating a GitHub Release, which ran a GitHub Actions workflow. Currently in 2026 this is being done by publishing from the local environment
+with npmjs credentials. See the publish target in the Makefile for details.
+
+In the future we should re-enable the previous GitHub Actions flow by generating a new npm access token and storing it as the npm_token secret in the GitHub repository settings.

package/lib/components/data-view/data-view.js

@@ -7,188 +7,234 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _variables = _interopRequireDefault(require("../../styles/variables.scss"));
 require("./data-view.scss");
-var _reactTable = _interopRequireDefault(require("react-table"));
-require("react-table/react-table.css");
+var _reactTable = require("@tanstack/react-table");
 var _reactJsonView = _interopRequireDefault(require("react-json-view"));
 var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
 var _reactTabs = require("react-tabs");
 var _lodash = _interopRequireDefault(require("lodash"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-var _default = exports.default = /*#__PURE__*/function (_Component) {
-  function _default() {
-    var _this;
-    _classCallCheck(this, _default);
-    _this = _callSuper(this, _default);
-    _this.state = {
-      index: 0
-    };
-    return _this;
-  }
-  _inherits(_default, _Component);
-  return _createClass(_default, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isGeojson = this.props.format == 'geojson';
-      var cleanData = isGeojson ? undefined : this.getCleanData(this.props.data);
-      var columns = this.props.columns.map(function (column) {
-        return {
-          Header: column,
-          id: column,
-          accessor: function accessor(row) {
-            return row[column];
-          },
-          headerClassName: 'table-header'
-        };
-      });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        id: "data-view"
-      }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tabs, {
-        selectedIndex: this.state.index,
-        onSelect: function onSelect(tabIndex) {
-          return _this2.setState({
-            index: tabIndex
-          });
-        }
-      }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
-        className: "header"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "tab-area"
-      }, !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
-        "data-testid": "data-table"
-      }, "Table"), /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
-        "data-testid": "data-json"
-      }, "JSON"))), !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
-        id: "data-view-table"
-      }, /*#__PURE__*/_react.default.createElement(_reactTable.default, {
-        data: cleanData,
-        columns: columns,
-        loading: this.props.loading,
-        defaultPageSize: 50,
-        style: {
-          height: '400px'
-        },
-        className: "-striped -highlight",
-        page: this.props.page,
-        onPageChange: this.props.onNextPageClicked
-      }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
-        id: "data-view-raw"
-      }, this.renderJsonOrLoading(this.props.loading)))));
-    }
-  }, {
-    key: "cleanseData",
-    value: function cleanseData(data) {
-      var _this3 = this;
-      if (!data.map) {
-        return [];
-      }
-      return data.map(function (row) {
-        return _this3.cleanseRow(row);
-      });
-    }
-  }, {
-    key: "cleanseRow",
-    value: function cleanseRow(row) {
-      var _this4 = this;
-      var deconstructedObject = Object.entries(row);
-      var listOfKeyValues = deconstructedObject.map(function (field) {
-        return _defineProperty({}, field[0], _this4.cleanseField(field[1]));
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var DataTable = function DataTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    page = _ref.page,
+    onNextPageClicked = _ref.onNextPageClicked;
+  var _useState = (0, _react.useState)({
+      pageIndex: page || 0,
+      pageSize: 50
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    pagination = _useState2[0],
+    setPagination = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setPagination(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: page || 0
       });
-      var reconstructedObject = Object.assign.apply(Object, [{}].concat(_toConsumableArray(listOfKeyValues)));
-      return reconstructedObject;
-    }
-  }, {
-    key: "cleanseField",
-    value: function cleanseField(value) {
-      if (typeof value === 'boolean') {
-        return value.toString();
-      } else if (_lodash.default.isNull(value) || _lodash.default.isNaN(value)) {
-        return '';
-      } else if (_typeof(value) === 'object') {
-        return JSON.stringify(value);
-      } else {
-        return value;
+    });
+  }, [page]);
+  var table = (0, _reactTable.useReactTable)({
+    data: data || [],
+    columns: columns,
+    state: {
+      pagination: pagination
+    },
+    onPaginationChange: function onPaginationChange(updater) {
+      var newPagination = typeof updater === 'function' ? updater(pagination) : updater;
+      setPagination(newPagination);
+      if (onNextPageClicked) {
+        onNextPageClicked(newPagination.pageIndex);
       }
+    },
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getPaginationRowModel: (0, _reactTable.getPaginationRowModel)()
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '400px',
+      overflowY: 'auto'
     }
-  }, {
-    key: "getCleanData",
-    value: function getCleanData(queryData) {
-      return queryData ? this.cleanseData(queryData) : queryData;
+  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: headerGroup.id
+    }, headerGroup.headers.map(function (header) {
+      var _header$column$column;
+      return /*#__PURE__*/_react.default.createElement("th", {
+        key: header.id,
+        scope: "col",
+        className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header'
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+    }));
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: columns.length,
+    className: "no-data-message"
+  }, "No rows found")) : table.getRowModel().rows.map(function (row, i) {
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: row.id,
+      className: i % 2 === 0 ? 'striped-row' : ''
+    }, row.getVisibleCells().map(function (cell) {
+      return /*#__PURE__*/_react.default.createElement("td", {
+        key: cell.id
+      }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pagination"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return table.previousPage();
+    },
+    disabled: !table.getCanPreviousPage(),
+    "aria-label": "Previous page"
+  }, '<'), /*#__PURE__*/_react.default.createElement("span", null, "Page", ' ', /*#__PURE__*/_react.default.createElement("input", {
+    "data-testid": "page-number-input",
+    value: table.getState().pagination.pageIndex + 1,
+    onChange: function onChange(e) {
+      var pageNum = e.target.value ? Number(e.target.value) - 1 : 0;
+      table.setPageIndex(pageNum);
+    },
+    style: {
+      width: '3rem'
     }
-  }, {
-    key: "renderJsonOrLoading",
-    value: function renderJsonOrLoading(isLoading) {
-      if (isLoading) {
-        return /*#__PURE__*/_react.default.createElement(_loadingElement.default, {
-          className: "spinner"
-        });
-      } else {
-        return /*#__PURE__*/_react.default.createElement(_reactJsonView.default, {
-          src: this.props.data,
-          theme: this.getTheme(),
-          collapsed: 2
-        });
-      }
-    }
-  }, {
-    key: "getTheme",
-    value: function getTheme() {
-      // react-json-view uses the 'base16' theme structure:
-      // https://github.com/chriskempson/base16/blob/master/styling.md
+  }), ' ', "of", ' ', /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "total-pages"
+  }, table.getPageCount())), /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "next-page-button",
+    onClick: function onClick() {
+      return table.nextPage();
+    },
+    disabled: !table.getCanNextPage(),
+    "aria-label": "Next page"
+  }, '>')));
+};
+var getTheme = function getTheme() {
+  return {
+    // react-json-view uses the 'base16' theme structure:
+    // https://github.com/chriskempson/base16/blob/master/styling.md
+    base00: 'white',
+    // Default Background
+    base01: 'white',
+    // Lighter Background
+    base02: _variables.default.headerGrey,
+    // Null background
+    base03: _variables.default.almostBlack,
+    // Null Text
+    base04: _variables.default.mediumGrey,
+    // Item counts
+    base05: _variables.default.darkGrey,
+    // Unused
+    base06: _variables.default.darkGrey,
+    // Unused
+    base07: _variables.default.lightBlue,
+    // Field names
+    base08: _variables.default.darkGrey,
+    // Unused
+    base09: _variables.default.green,
+    // Field values
+    base0A: _variables.default.darkGrey,
+    // Unused
+    base0B: _variables.default.darkGrey,
+    // Unused
+    base0C: _variables.default.darkGrey,
+    // Unused
+    base0D: _variables.default.darkGrey,
+    // Expanders
+    base0E: _variables.default.darkGrey,
+    // Expanders
+    base0F: _variables.default.darkGrey // Expanders
+  };
+};
+var cleanseField = function cleanseField(value) {
+  if (typeof value === 'boolean') {
+    return value.toString();
+  } else if (_lodash.default.isNull(value) || _lodash.default.isNaN(value)) {
+    return '';
+  } else if (_typeof(value) === 'object') {
+    return JSON.stringify(value);
+  } else {
+    return value;
+  }
+};
+var cleanseRow = function cleanseRow(row) {
+  var reconstructedObject = Object.assign.apply(Object, [{}].concat(_toConsumableArray(Object.entries(row).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      k = _ref3[0],
+      v = _ref3[1];
+    return _defineProperty({}, k, cleanseField(v));
+  }))));
+  return reconstructedObject;
+};
+var cleanseData = function cleanseData(data) {
+  if (!data || !data.map) return [];
+  return data.map(function (row) {
+    return cleanseRow(row);
+  });
+};
+var _default = exports.default = function _default(props) {
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    index = _useState4[0],
+    setIndex = _useState4[1];
+  var isGeojson = props.format === 'geojson';
+  var cleanData = isGeojson ? undefined : props.data ? cleanseData(props.data) : props.data;
+  var columns = (0, _react.useMemo)(function () {
+    return (props.columns || []).map(function (column) {
       return {
-        base00: 'white',
-        // Default Background
-        base01: 'white',
-        // Lighter Background
-        base02: _variables.default.headerGrey,
-        // Null background
-        base03: _variables.default.almostBlack,
-        // Null Text
-        base04: _variables.default.mediumGrey,
-        // Item counts
-        base05: _variables.default.darkGrey,
-        // Unused
-        base06: _variables.default.darkGrey,
-        // Unused
-        base07: _variables.default.lightBlue,
-        // Field names
-        base08: _variables.default.darkGrey,
-        // Unused
-        base09: _variables.default.green,
-        // Field values
-        base0A: _variables.default.darkGrey,
-        // Unused
-        base0B: _variables.default.darkGrey,
-        // Unused
-        base0C: _variables.default.darkGrey,
-        // Unused
-        base0D: _variables.default.darkGrey,
-        // Expanders
-        base0E: _variables.default.darkGrey,
-        // Expanders
-        base0F: _variables.default.darkGrey // Expanders
+        header: column,
+        id: column,
+        accessorFn: function accessorFn(row) {
+          return row[column];
+        },
+        meta: {
+          headerClassName: 'table-header'
+        }
       };
+    });
+  }, [props.columns]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "data-view"
+  }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tabs, {
+    selectedIndex: index,
+    onSelect: function onSelect(tabIndex) {
+      return setIndex(tabIndex);
     }
-  }]);
-}(_react.Component);
+  }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
+    className: "header"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "tab-area"
+  }, !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+    "data-testid": "data-table"
+  }, "Table"), /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+    "data-testid": "data-json"
+  }, "JSON"))), !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "data-view-table"
+  }, /*#__PURE__*/_react.default.createElement(DataTable, {
+    data: cleanData,
+    columns: columns,
+    page: props.page,
+    onNextPageClicked: props.onNextPageClicked
+  }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "data-view-raw"
+  }, props.loading ? /*#__PURE__*/_react.default.createElement(_loadingElement.default, {
+    className: "spinner"
+  }) : /*#__PURE__*/_react.default.createElement(_reactJsonView.default, {
+    src: props.data,
+    theme: getTheme(),
+    collapsed: 2
+  })))));
+};

package/lib/components/data-view/data-view.scss

@@ -7,10 +7,18 @@
     justify-content: space-between;
   }
 
-  .ReactTable .rt-noData {
+  .no-data-message {
     color: black;
   }
 
+  tbody tr:nth-child(even).striped-row {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+
+  tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
   .header-text-items {
     margin: 1rem;
   }
@@ -22,6 +30,19 @@
   #data-view-table {
     color: $almost-black;
 
+    table {
+      table-layout: fixed;
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 7px 5px;
+    }
+
     .table-header {
       background-color: $header-grey;
       text-align: left;

package/lib/components/data-view/data-view.test.js

@@ -3,7 +3,6 @@ import {
 } from 'enzyme'
 import DataView from './data-view'
 import { Tab, TabPanel } from 'react-tabs'
-import ReactTable from 'react-table'
 import ReactJson from 'react-json-view'
 import LoadingElement from '../../components/generic-elements/loading-element'
 
@@ -27,14 +26,14 @@ describe('data view', () => {
     })
 
     test('should render table headers including column names with dots in them', () => {
-      const headers = subject.find('.rt-resizable-header-content')
+      const headers = subject.find('#data-view-table th')
       const actual = headers.map(x => x.text())
 
       expect(actual).toContain('firstName', 'lastName', 'enrolled', 'firstName.lastName')
     })
 
     test('should render table rows including data for column names with dots', () => {
-      const table_elements = subject.find('.rt-tr .rt-td')
+      const table_elements = subject.find('#data-view-table tbody td')
       const expected = [
         'Joe', 'Smith', 'true', 'Joe Smith',
         'Jane', 'Doe', 'false', 'Jane Doe'
@@ -52,12 +51,12 @@ describe('data view', () => {
       expect(subject.find(TabPanel).length).toEqual(2)
     })
 
-    it('has a react table component on the first tab, and it is shown by default', () => {
-      expect(subject.find(ReactTable).length).toEqual(1)
+    it('has a data table on the first tab, and it is shown by default', () => {
+      expect(subject.find('#data-view-table table').length).toEqual(1)
     })
 
     it('has a react json component on the second tab', () => {
-      subject.setState({ index: 1 })
+      subject.find('[data-testid="data-json"]').first().simulate('click')
       expect(subject.find(ReactJson).length).toEqual(1)
     })
   })
@@ -78,8 +77,8 @@ describe('data view', () => {
       expect(subject.find(TabPanel).length).toEqual(1)
     })
 
-    it('does not have a react table component', () => {
-      expect(subject.find(ReactTable).length).toEqual(0)
+    it('does not have a data table component', () => {
+      expect(subject.find('#data-view-table').length).toEqual(0)
     })
 
     it('has a react json component on the first tab', () => {
@@ -93,7 +92,7 @@ describe('data view', () => {
       const data = []
       const columns = ['firstName', 'lastName', 'enrolled', 'firstName.lastName']
       subject = mount(<DataView data={data} columns={columns} loading />)
-      subject.setState({ index: 1 })
+      subject.find('[data-testid="data-json"]').first().simulate('click')
     })
 
     it('does not render a react json component', () => {
@@ -106,7 +105,7 @@ describe('data view', () => {
   })
 
   describe('data table', () => {
-    it('converts unrenderable values to strings only for the react table', () => {
+    it('converts unrenderable values to strings for the data table', () => {
       const queryData = [
         { object: { value: 1 }, boolean: true, array: [1], nan: NaN, null: null },
         { object: { value: 2 }, boolean: false, array: [2, 3], nan: NaN, null: null }
@@ -115,16 +114,16 @@ describe('data view', () => {
 
       const subject = mount(<DataView data={queryData} columns={columns} />)
 
-      const expectedData = [
-        { object: '{\"value\":1}', boolean: 'true', array: '[1]', nan: '', null: '' },
-        { object: '{\"value\":2}', boolean: 'false', array: '[2,3]', nan: '', null: '' }
-      ]
-
-      expect(subject.find(ReactTable).prop('data')).toEqual(expectedData)
+      const cells = subject.find('#data-view-table tbody td')
+      const actualValues = cells.map(c => c.text())
+      expect(actualValues).toEqual([
+        '{"value":1}', 'true', '[1]', '', '',
+        '{"value":2}', 'false', '[2,3]', '', ''
+      ])
       expect(subject.prop('data')).toEqual(queryData)
     })
 
-    it('can handle column names with dots (.) by giving a custom accessor', () => {
+    it('can handle column names with dots (.) by rendering correct cell values', () => {
       const queryData = [
         { 'first.name': 'Mark', 'last.name': 'Johnson' },
         { 'first.name': 'George', 'last.name': 'Lakoff' }
@@ -136,20 +135,15 @@ describe('data view', () => {
 
       const subject = mount(<DataView data={queryData} columns={columns} />)
 
-      const stringifyAccessor = column => {
-        column.accessor = column.accessor.toString().replace(/\s/g, '')
-        return column
-      }
-
-      const expectedColumns = [
-        { Header: 'first.name', id: 'first.name', accessor: (row) => row[column], headerClassName: 'table-header' },
-        { Header: 'last.name', id: 'last.name', accessor: (row) => row[column], headerClassName: 'table-header' }
-      ]
-      expectedColumns.map(stringifyAccessor)
-
-      const actualColumns = subject.find(ReactTable).prop('columns').map(stringifyAccessor)
+      const headers = subject.find('#data-view-table th').map(h => h.text())
+      expect(headers).toContain('first.name')
+      expect(headers).toContain('last.name')
 
-      expect(actualColumns).toEqual(expectedColumns)
+      const cells = subject.find('#data-view-table tbody td').map(c => c.text())
+      expect(cells).toContain('Mark')
+      expect(cells).toContain('Johnson')
+      expect(cells).toContain('George')
+      expect(cells).toContain('Lakoff')
     })
   })
 })