@civicactions/cmsds-open-data-components 1.5.0-alpha.0 → 1.6.0-alpha.2

package/dist/scss/templates/dataset.scss

@@ -14,4 +14,25 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}
+
+.dc-c-resize-handle {
+  height: 57px;
+  background-color: $color-primary-darkest;
+  width: 10px;
+  min-width: 10px;
+  display: block;
+  margin-left: -10px;
+  // position: absolute;
+  // right: 0;
+  // top: 0;
+  // padding: 10px;
+  z-index: 1000;
+  border-top: 2px solid rgb(50, 58, 69);
+  border-bottom: 2px solid rgb(50, 58, 69);
+  // border-right: 1px solid rgb(50, 58, 69) !important;
+  &.isResizing,
+  &:hover {
+    background-color: $color-primary-darker;
+  }
+}

package/dist/scss/templates/header.scss

@@ -4,8 +4,8 @@
   color: $color-white;
   text-decoration: none;
   &::before {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f0c9';
+    font-family: "Font Awesome 5 Pro";
+    content: "\f0c9";
     color: $color-white;
     font-size: 18px;
     padding-right: 10px;
@@ -26,8 +26,8 @@
   padding-left: 0;
   padding-bottom: 16px;
   &::before {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f00d';
+    font-family: "Font Awesome 5 Pro";
+    content: "\f00d";
     color: $color-white;
     font-size: 18px;
     padding-right: 10px;
@@ -50,7 +50,7 @@
   z-index: 500;
   height: 100%;
   width: 100%;
-  transition: left .7s;
+  transition: left 0.7s;
   padding: 50px 0;
 }
 
@@ -78,21 +78,30 @@
     width: 48px;
     height: 2px;
     background: $color-primary-alt-light;
-    content: '';
+    content: "";
   }
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-  a {
-    display: block;
+  a,
+  a:hover,
+  a:focus,
+  a:visited {
+    display: inline-block;
     color: $color-white;
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+  }
+  a:hover,
+  a:active {
+    border-bottom: 2px solid $color-primary-alt-light;
   }
 }
 .has-submenu > button::after {
-  font-family: 'Font Awesome 5 Pro';
-  content: '\f105';
+  font-family: "Font Awesome 5 Pro";
+  content: "\f105";
   color: $color-white;
   font-size: 18px;
   padding-right: 10px;
@@ -106,7 +115,7 @@
   font-weight: lighter;
 }
 .has-submenu.open > button::after {
-  content: '\f107';
+  content: "\f107";
 }
 .dc-c-header--mobile-links {
   button {
@@ -123,15 +132,19 @@
     z-index: 501;
     background-color: transparent;
   }
-  .dc-c-cmsheader-menu a, button { color: $color-white;}
-  .cms-link-container a::before { color: $color-white; }
+  .dc-c-cmsheader-menu a,
+  button {
+    color: $color-white;
+  }
+  .cms-link-container a::before {
+    color: $color-white;
+  }
   .dc-c-mobile-header--menu {
     left: 0;
   }
 }
 
 .cms-link-container {
-  
   display: block;
   margin-right: 20px;
   // margin-top: -5px;
@@ -139,14 +152,14 @@
   a {
     text-decoration: none;
     border-bottom: none;
-    
+
     margin-right: 20px;
     display: inline-block;
   }
   a::before {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f33e';
-    color: #323A45;
+    font-family: "Font Awesome 5 Pro";
+    content: "\f33e";
+    color: #323a45;
     font-size: 18px;
     padding-right: 10px;
     display: inline-block;
@@ -166,12 +179,10 @@
   }
 }
 
-
-
 .cms-text-container {
   display: block;
   padding-top: 28px;
-  color: #6F757C;
+  color: #6f757c;
 }
 
 .dc-c-cmsheader-menu {
@@ -183,15 +194,15 @@
   a {
     margin: 3px 7px;
     padding: 0;
-    color: #323A45;
+    color: #323a45;
     text-decoration: none;
     border-bottom: 1px solid;
     border-bottom-color: #eee;
-    border-bottom-color: rgba(255,255,255,0.2);
+    border-bottom-color: rgba(255, 255, 255, 0.2);
   }
   a:hover,
   a:active {
-    border-bottom: 2px solid #323A45;
+    border-bottom: 2px solid #323a45;
   }
 }
 
@@ -207,7 +218,7 @@
     height: 85px;
     width: 240px;
     float: left;
-    border-right: 1px solid #D6D7D9;
+    border-right: 1px solid #d6d7d9;
     a {
       margin-top: 28px;
       margin-bottom: 20px;
@@ -270,9 +281,13 @@ nav.dc-c-site-menu {
   }
 }
 
-nav > ul li       ul { display: none; }
+nav > ul li ul {
+  display: none;
+}
 
-nav > ul li.open ul { display: block; }
+nav > ul li.open ul {
+  display: block;
+}
 li.has-submenu {
   position: relative;
 }
@@ -304,7 +319,7 @@ li.has-submenu {
 }
 
 div.ds-c-dialog-wrap {
-  background-color: rgba(0,113,188,0.9);
+  background-color: rgba(0, 113, 188, 0.9);
 }
 
 div.ds-c-dialog {
@@ -325,8 +340,8 @@ div.ds-c-dialog button {
   top: 24px;
   right: 24px;
   &::after {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f00d';
+    font-family: "Font Awesome 5 Pro";
+    content: "\f00d";
     height: 22px;
     font-size: 20px;
     line-height: 20px;
@@ -342,8 +357,8 @@ div.ds-c-dialog button {
 
 .dc-c-search-modal--button {
   &::before {
-    font-family: 'Font Awesome 5 Pro';
-    content: '\f002';
+    font-family: "Font Awesome 5 Pro";
+    content: "\f002";
     color: $color-white;
     font-size: 18px;
     padding-right: 10px;
@@ -357,4 +372,3 @@ div.ds-c-dialog button {
     font-weight: lighter;
   }
 }
-

package/lib/components/ResourcePreview/index.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 exports.prepareColumns = prepareColumns;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _dataCatalogComponents = require("@civicactions/data-catalog-components");
@@ -16,6 +18,14 @@ var _dataCatalogServices = require("@civicactions/data-catalog-services");
 
 var _designSystem = require("@cmsgov/design-system");
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function calculateMaxWidth(previewSize) {
+  return Math.floor(previewSize * 0.84);
+}
+
 function prepareColumns(columns, schema) {
   return columns.map(function (column) {
     return {
@@ -38,7 +48,7 @@ function DefaultColumnFilter(_ref) {
     },
     labelClassName: "ds-u-visibility--screen-reader",
     name: accessor,
-    value: filterValue || ''
+    value: filterValue || ""
   });
 }
 
@@ -48,26 +58,39 @@ var ResourcePreview = function ResourcePreview(_ref2) {
       options = _ref2.options,
       resource = _ref2.resource,
       customColumns = _ref2.customColumns,
-      truncateCellHeader = _ref2.truncateCellHeader;
+      truncateCellHeader = _ref2.truncateCellHeader,
+      columnSettings = _ref2.columnSettings,
+      columnWidths = _ref2.columnWidths;
+
+  var previewContainer = _react["default"].useRef(null);
+
+  var columnDefaults = _objectSpread({
+    width: 200,
+    maxWidth: previewContainer.current ? calculateMaxWidth(previewContainer.current.offsetWidth) : 300,
+    minWidth: 100
+  }, columnWidths);
+
   var tableClasses = {
-    tableContainerClassName: 'dc-c-table-container',
-    headerCellClassName: 'ds-u-border--dark ds-u-padding--2 ds-u-border-y--2 ds-u-border-right--1 ds-u-font-weight--bold dc-c-table-header-cell',
-    headerGroupClassName: 'dc-c-table-header-group',
+    tableContainerClassName: "dc-c-table-container",
+    headerCellClassName: "ds-u-border--dark ds-u-padding--2 ds-u-border-y--2 ds-u-font-weight--bold dc-c-table-header-cell",
+    headerGroupClassName: "dc-c-table-header-group",
     headerCellTextClassName: "".concat(truncateCellHeader ? "dc-truncate" : "", " ds-u-display--inline-block"),
-    cellEvenRowClassName: 'ds-u-fill--gray-lightest',
+    cellEvenRowClassName: "ds-u-fill--gray-lightest",
     cellClassName: "".concat(tablePadding, " dc-truncate ds-u-padding-x--1"),
-    filterTitleClassName: 'ds-u-font-weight--bold ds-u-padding-left--2  ds-u-fill--gray-lightest ds-u-display--block',
-    headerFilterClassName: 'ds-u-padding-top--1 ds-u-fill--gray-lightest',
-    headerFilterCellClassName: 'ds-u-padding-x--1 ds-u-padding-bottom--0 ds-u-border-bottom--0 ds-u-fill--gray-lightest',
-    columnIsSortedClassName: 'dc-c-sort dc-c-sort--default',
-    columnIsSortedAscClassName: 'dc-c-sort dc-c-sort--asc',
-    columnIsSortedDecClassName: 'dc-c-sort dc-c-sort--desc',
-    tableColumnResizer: 'dc-c-resize-handle',
-    tableColumnIsResizing: 'isResizing'
+    filterTitleClassName: "ds-u-font-weight--bold ds-u-padding-left--2  ds-u-fill--gray-lightest ds-u-display--block",
+    headerFilterClassName: "ds-u-padding-top--1 ds-u-fill--gray-lightest",
+    headerFilterCellClassName: "ds-u-padding-x--1 ds-u-padding-bottom--0 ds-u-border-bottom--0 ds-u-fill--gray-lightest",
+    columnIsSortedClassName: "dc-c-sort dc-c-sort--default",
+    columnIsSortedAscClassName: "dc-c-sort dc-c-sort--asc",
+    columnIsSortedDecClassName: "dc-c-sort dc-c-sort--desc",
+    tableColumnResizer: "dc-c-resize-handle",
+    tableColumnIsResizing: "isResizing"
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: previewContainer,
+    id: "resource-preview",
     className: "ds-u-overflow--auto ds-u-border-x--1 ds-u-border-bottom--1"
-  }, /*#__PURE__*/_react["default"].createElement(_dataCatalogComponents.DataTable, {
+  }, previewContainer.current && /*#__PURE__*/_react["default"].createElement(_dataCatalogComponents.DataTable, {
     filterTitle: "Filter columns",
     data: resource.values,
     columns: customColumns ? customColumns : prepareColumns(resource.columns, resource.schema[id]),
@@ -82,11 +105,7 @@ var ResourcePreview = function ResourcePreview(_ref2) {
     sortTransform: _dataCatalogServices.transformTableSortToQuerySort,
     tableClasses: tableClasses,
     className: "dc-c-datatable",
-    columnDefaults: {
-      width: 200,
-      maxWidth: 300,
-      minWidth: 50
-    },
+    columnDefaults: columnDefaults,
     customColumnFilter: DefaultColumnFilter,
     options: options,
     CustomLoadingComponent: /*#__PURE__*/_react["default"].createElement("div", {
@@ -102,7 +121,7 @@ var ResourcePreview = function ResourcePreview(_ref2) {
 
 ResourcePreview.defaultProps = {
   options: {
-    layout: 'flex',
+    layout: "flex",
     columnFilter: false,
     columnSort: true,
     columnResize: true

package/lib/templates/Dataset/DatasetBody.js

@@ -47,15 +47,17 @@ var DatasetBody = function DatasetBody(_ref) {
   var id = _ref.id,
       dataset = _ref.dataset,
       additionalParams = _ref.additionalParams,
-      customColumns = _ref.customColumns;
+      customColumns = _ref.customColumns,
+      columnSettings = _ref.columnSettings,
+      columnWidths = _ref.columnWidths;
   var apiDocs = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)('ds-u-padding-y--1'),
+  var _useState = (0, _react.useState)("ds-u-padding-y--1"),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       tablePadding = _useState2[0],
       setTablePadding = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(''),
+  var _useState3 = (0, _react.useState)(""),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       fileFormat = _useState4[0],
       setFileFormat = _useState4[1];
@@ -67,18 +69,18 @@ var DatasetBody = function DatasetBody(_ref) {
     distribution = distribution_array[0];
   }
 
-  var resource = (0, _dataCatalogServices.useDatastore)('', process.env.REACT_APP_ROOT_URL, {
+  var resource = (0, _dataCatalogServices.useDatastore)("", process.env.REACT_APP_ROOT_URL, {
     limit: 10,
     manual: true
   }, additionalParams);
   (0, _react.useEffect)(function () {
     if (distribution.identifier) {
-      var localFileFormat = '';
+      var localFileFormat = "";
 
       if (distribution.data.format) {
         localFileFormat = distribution.data.format.toUpperCase();
       } else if (distribution.data.mediaType) {
-        var mediaType = distribution.data.mediaType.split('/');
+        var mediaType = distribution.data.mediaType.split("/");
 
         if (mediaType.length && mediaType[1]) {
           localFileFormat = mediaType[1].toUpperCase();
@@ -129,25 +131,33 @@ var DatasetBody = function DatasetBody(_ref) {
     id: distribution.identifier,
     tablePadding: tablePadding,
     resource: resource,
-    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[0].identifier])
+    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[0].identifier]),
+    columnSettings: columnSettings,
+    options: {
+      layout: "flex",
+      columnFilter: false,
+      columnSort: true,
+      columnResize: true
+    },
+    columnWidths: columnWidths
   }), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
     resource: resource
   }), /*#__PURE__*/_react["default"].createElement(_ResourceInformation["default"], {
     resource: resource
-  })) : /*#__PURE__*/_react["default"].createElement(Spinner, null)) : '', dataset.identifier && /*#__PURE__*/_react["default"].createElement(_DatasetAdditionalInformation["default"], {
+  })) : /*#__PURE__*/_react["default"].createElement(Spinner, null)) : "", dataset.identifier && /*#__PURE__*/_react["default"].createElement(_DatasetAdditionalInformation["default"], {
     datasetInfo: dataset
   }), Object.keys(distribution).length && fileFormat === "CSV" && dataset.identifier ? /*#__PURE__*/_react["default"].createElement("div", {
     ref: apiDocs
   }, /*#__PURE__*/_react["default"].createElement("h2", null, "Try the API"), /*#__PURE__*/_react["default"].createElement(_swaggerUiReact["default"], {
-    url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? '?ACA=' + additionalParams.ACA + '&redirect=false' : ''),
-    docExpansion: 'list',
+    url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? "?ACA=" + additionalParams.ACA + "&redirect=false" : ""),
+    docExpansion: "list",
     defaultModelsExpandDepth: -1
-  })) : ''), /*#__PURE__*/_react["default"].createElement("div", {
+  })) : ""), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ds-l-md-col--3 ds-l-sm-col--12"
   }, Object.keys(distribution).length ? /*#__PURE__*/_react["default"].createElement(_DatasetDownloads["default"], {
     downloadURL: distribution.data.downloadURL,
     type: fileFormat
-  }) : '', /*#__PURE__*/_react["default"].createElement(_DatasetTags["default"], {
+  }) : "", /*#__PURE__*/_react["default"].createElement(_DatasetTags["default"], {
     keywords: dataset.keyword
   }), Object.keys(distribution).length && fileFormat === "CSV" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1"
@@ -157,11 +167,11 @@ var DatasetBody = function DatasetBody(_ref) {
     variation: "transparent",
     onClick: function onClick() {
       return window.scrollTo({
-        behavior: 'smooth',
+        behavior: "smooth",
         top: apiDocs.current.offsetTop
       });
     }
-  }, "Scroll to dataset API")) : '')));
+  }, "Scroll to dataset API")) : "")));
 };
 
 DatasetBody.propTypes = {

package/lib/templates/Dataset/index.js

@@ -28,7 +28,9 @@ var Dataset = function Dataset(_ref) {
       rootUrl = _ref.rootUrl,
       additionalParams = _ref.additionalParams,
       customColumns = _ref.customColumns,
-      setDatasetTitle = _ref.setDatasetTitle;
+      setDatasetTitle = _ref.setDatasetTitle,
+      columnSettings = _ref.columnSettings,
+      columnWidths = _ref.columnWidths;
   var metastore = (0, _dataCatalogServices.useMetastoreDataset)(id, rootUrl, additionalParams);
   var dataset = metastore.dataset;
   var title = dataset.title ? dataset.title : "";
@@ -40,7 +42,9 @@ var Dataset = function Dataset(_ref) {
     }
   }, [title]);
 
-  var notFoundContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h1", {
+  var notFoundContent = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-padding-top--3"
+  }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ds-title"
   }, "Error: Dataset not found"), /*#__PURE__*/_react["default"].createElement("p", null, "We're sorry, but there is no dataset ID that matches your entry. You may have been directed here because:"), /*#__PURE__*/_react["default"].createElement("ol", null, /*#__PURE__*/_react["default"].createElement("li", null, "The address you typed contains a typo;"), /*#__PURE__*/_react["default"].createElement("li", null, "The requested dataset no longer exists.")), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "ds-u-font-weight--bold"
@@ -52,7 +56,9 @@ var Dataset = function Dataset(_ref) {
     id: id,
     dataset: dataset,
     additionalParams: additionalParams,
-    customColumns: customColumns ? customColumns : []
+    customColumns: customColumns ? customColumns : [],
+    columnSettings: columnSettings,
+    columnWidths: columnWidths
   }));
 };
 

package/lib/templates/DatasetSearch/index.js

@@ -37,6 +37,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var defaultSort = {
+  modified: "desc",
+  title: "asc",
+  "default": "modified"
+};
+
 function updateUrl(selectedFacets, fulltext, sort) {
   var newParams = _objectSpread({}, selectedFacets);
 
@@ -59,13 +65,13 @@ function selectedFacetsMessage(facets, alternateTitles) {
   var keys = Object.keys(facets);
   keys.forEach(function (k) {
     if (facets[k].length) {
-      message.push("".concat(alternateTitles[k], ": ").concat(facets[k].join(', ')));
+      message.push("".concat(alternateTitles[k], ": ").concat(facets[k].join(", ")));
     }
   });
-  return message.join(' & ');
+  return message.join(" & ");
 }
 
-function transformUrlParamsToSearchObject(searchParams, facetList) {
+function transformUrlParamsToSearchObject(searchParams, facetList, sortOptions) {
   var params = _qs["default"].parse(searchParams, {
     ignoreQueryPrefix: true
   });
@@ -77,8 +83,8 @@ function transformUrlParamsToSearchObject(searchParams, facetList) {
   return {
     selectedFacets: selectedFacets,
     fulltext: params.fulltext,
-    sort: !params.sort ? "modified" : params.sort,
-    sortOrder: !params.sort || params.sort === "modified" ? "desc" : "asc"
+    sort: !params.sort ? sortOptions["default"] : params.sort,
+    sortOrder: !params.sort ? sortOptions[sortOptions["default"]] : sortOptions[params.sort]
   };
 }
 
@@ -91,14 +97,17 @@ var DatasetSearch = function DatasetSearch(_ref) {
       fulltextLabelClassName = _ref.fulltextLabelClassName,
       fulltextPlaceholder = _ref.fulltextPlaceholder,
       formClassName = _ref.formClassName,
-      additionalParams = _ref.additionalParams;
+      additionalParams = _ref.additionalParams,
+      sortOptions = _ref.sortOptions;
+
+  var sortOpt = _objectSpread(_objectSpread({}, defaultSort), sortOptions);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       currentResultNumbers = _useState2[0],
       setCurrentResultNumbers = _useState2[1];
 
-  var _useSearchAPI = (0, _dataCatalogServices.useSearchAPI)(rootUrl, _objectSpread({}, transformUrlParamsToSearchObject(location.search, ['theme', 'keyword'])), additionalParams),
+  var _useSearchAPI = (0, _dataCatalogServices.useSearchAPI)(rootUrl, _objectSpread({}, transformUrlParamsToSearchObject(location.search, ["theme", "keyword"], sortOpt)), additionalParams),
       fulltext = _useSearchAPI.fulltext,
       selectedFacets = _useSearchAPI.selectedFacets,
       loading = _useSearchAPI.loading,
@@ -119,7 +128,7 @@ var DatasetSearch = function DatasetSearch(_ref) {
       theme = _separateFacets.theme,
       keyword = _separateFacets.keyword;
 
-  var _useState3 = (0, _react.useState)(''),
+  var _useState3 = (0, _react.useState)(""),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       filterText = _useState4[0],
       setFilterText = _useState4[1];
@@ -133,7 +142,7 @@ var DatasetSearch = function DatasetSearch(_ref) {
   _react["default"].useEffect(function () {
     var url = new URL(window.location);
     var searchParams = updateUrl(selectedFacets, fulltext, sort);
-    window.history.pushState({}, '', "".concat(url.origin).concat(url.pathname).concat(searchParams));
+    window.history.pushState({}, "", "".concat(url.origin).concat(url.pathname).concat(searchParams));
   }, [fulltext, selectedFacets, sort]);
 
   (0, _react.useEffect)(function () {
@@ -153,12 +162,7 @@ var DatasetSearch = function DatasetSearch(_ref) {
   }
 
   function updateSort(value) {
-    if (value === 'modified') {
-      setSortOrder('desc');
-    } else if (value === 'title') {
-      setSortOrder('asc');
-    }
-
+    setSortOrder(sortOpt[value]);
     setSort(value);
   }
 
@@ -201,11 +205,11 @@ var DatasetSearch = function DatasetSearch(_ref) {
     className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end"
   }, /*#__PURE__*/_react["default"].createElement("div", null, currentResultNumbers && /*#__PURE__*/_react["default"].createElement("p", {
     className: "ds-u-margin-y--0"
-  }, "Showing ", currentResultNumbers.startingNumber, " - ", currentResultNumbers.endingNumber, " of ", currentResultNumbers.total, " datasets"), /*#__PURE__*/_react["default"].createElement("p", {
+  }, "Showing ", currentResultNumbers.startingNumber, " -", " ", currentResultNumbers.endingNumber, " of", " ", currentResultNumbers.total, " datasets"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ds-u-margin-y--0"
   }, selectedFacetsMessage(selectedFacets, {
-    theme: 'Categories',
-    keyword: 'Tags'
+    theme: "Categories",
+    keyword: "Tags"
   }))), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
     className: "ds-u-padding--0 dc-c-clear-filters",
     variation: "transparent",
@@ -231,11 +235,11 @@ var DatasetSearch = function DatasetSearch(_ref) {
     className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1"
   }, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
     options: [{
-      label: 'Recently Updated',
-      value: 'modified'
+      label: "Recently Updated",
+      value: "modified"
     }, {
-      label: 'Alphabetical',
-      value: 'title'
+      label: "Alphabetical",
+      value: "title"
     }],
     value: sort,
     label: "Sort by",

package/lib/templates/FilteredResource/FilteredResourceBody.js

@@ -50,9 +50,11 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
       location = _ref.location,
       apiDocPage = _ref.apiDocPage,
       additionalParams = _ref.additionalParams,
-      customColumns = _ref.customColumns;
+      customColumns = _ref.customColumns,
+      columnSettings = _ref.columnSettings,
+      columnWidths = _ref.columnWidths;
 
-  var _React$useState = _react["default"].useState('ds-u-padding-y--1'),
+  var _React$useState = _react["default"].useState("ds-u-padding-y--1"),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       tablePadding = _React$useState2[0],
       setTablePadding = _React$useState2[1];
@@ -79,7 +81,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
   })) : {
     conditions: []
   };
-  var resource = (0, _dataCatalogServices.useDatastore)('', process.env.REACT_APP_ROOT_URL, _objectSpread(_objectSpread({}, options), {}, {
+  var resource = (0, _dataCatalogServices.useDatastore)("", process.env.REACT_APP_ROOT_URL, _objectSpread(_objectSpread({}, options), {}, {
     limit: 25,
     manual: true
   }), additionalParams);
@@ -151,7 +153,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
     className: "ds-u-text-align--left ds-u-font-weight--normal",
     onClick: function onClick() {
       return window.scrollTo({
-        behavior: 'smooth',
+        behavior: "smooth",
         top: apiDocs.current.offsetTop
       });
     }
@@ -171,7 +173,15 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
     id: distribution.identifier,
     tablePadding: tablePadding,
     resource: resource,
-    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[distIndex].identifier])
+    customColumns: (0, _functions.buildCustomColHeaders)(customColumns, resource.columns, resource.schema[distribution_array[distIndex].identifier]),
+    columnSettings: columnSettings,
+    options: {
+      layout: "flex",
+      columnFilter: false,
+      columnSort: true,
+      columnResize: true
+    },
+    columnWidths: columnWidths
   }), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
     resource: resource
   }), filtersOpen && /*#__PURE__*/_react["default"].createElement(_ResourceFilter["default"], {
@@ -183,14 +193,14 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
   })) : /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, null), dataset.identifier && /*#__PURE__*/_react["default"].createElement("div", {
     ref: apiDocs
   }, /*#__PURE__*/_react["default"].createElement("h2", null, "Try the API"), /*#__PURE__*/_react["default"].createElement(_swaggerUiReact["default"], {
-    url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? '?ACA=' + additionalParams.ACA + '&redirect=false' : ''),
-    docExpansion: 'list',
+    url: "".concat(process.env.REACT_APP_ROOT_URL, "/metastore/schemas/dataset/items/").concat(dataset.identifier, "/docs").concat(additionalParams && additionalParams.ACA ? "?ACA=" + additionalParams.ACA + "&redirect=false" : ""),
+    docExpansion: "list",
     defaultModelsExpandDepth: -1
   }))));
 };
 
 FilteredResourceBody.defaultProps = {
-  apiDocPage: '/api'
+  apiDocPage: "/api"
 };
 var _default = FilteredResourceBody;
 exports["default"] = _default;

package/lib/templates/FilteredResource/index.js

@@ -30,7 +30,9 @@ var FilteredResource = function FilteredResource(_ref) {
       apiDocPage = _ref.apiDocPage,
       additionalParams = _ref.additionalParams,
       customColumns = _ref.customColumns,
-      setDatasetTitle = _ref.setDatasetTitle;
+      setDatasetTitle = _ref.setDatasetTitle,
+      columnSettings = _ref.columnSettings,
+      columnWidths = _ref.columnWidths;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -64,7 +66,9 @@ var FilteredResource = function FilteredResource(_ref) {
     }
   }, [dataset.distribution, dataset.error, distIndex]);
 
-  var notFoundContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h1", {
+  var notFoundContent = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-padding-top--3"
+  }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ds-title"
   }, "Error: Dataset not found"), /*#__PURE__*/_react["default"].createElement("p", null, "We're sorry, but there is no dataset ID that matches your entry. You may have been directed here because:"), /*#__PURE__*/_react["default"].createElement("ol", null, /*#__PURE__*/_react["default"].createElement("li", null, "The address you typed contains a typo;"), /*#__PURE__*/_react["default"].createElement("li", null, "The requested dataset no longer exists.")), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "ds-u-font-weight--bold"
@@ -79,7 +83,9 @@ var FilteredResource = function FilteredResource(_ref) {
     location: location,
     apiDocPage: apiDocPage,
     additionalParams: additionalParams,
-    customColumns: customColumns ? customColumns : []
+    customColumns: customColumns ? customColumns : [],
+    columnSettings: columnSettings,
+    columnWidths: columnWidths
   })));
 };
 

package/lib/templates/PageNotFound/index.js

@@ -13,7 +13,7 @@ var PageNotFound = function PageNotFound(_ref) {
   var siteUrl = _ref.siteUrl,
       content = _ref.content;
   return /*#__PURE__*/_react["default"].createElement("section", {
-    className: "ds-l-container"
+    className: "ds-l-container ds-u-padding-top--3"
   }, content ? content : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ds-title"
   }, "Error: Page not found"), /*#__PURE__*/_react["default"].createElement("p", null, "We're sorry, but there is no ", siteUrl, " web page that matches your entry. You may have been directed here because:"), /*#__PURE__*/_react["default"].createElement("ol", null, /*#__PURE__*/_react["default"].createElement("li", null, "The address you typed contains a typo;"), /*#__PURE__*/_react["default"].createElement("li", null, "The requested page may have expired or;"), /*#__PURE__*/_react["default"].createElement("li", null, "The requested page may have been moved.")), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", {

package/lib/templates/mobile_header/index.js

@@ -70,7 +70,7 @@ var MobileHeader = function MobileHeader(_ref) {
 
     function handleClick(event) {
       // Links are wrapped in spans, this checks if the parent is an A, also check if in the search modal.
-      if (event.target.parentElement.nodeName === 'A' || event.target.closest('.dc-c-search-dialog')) {
+      if (event.target.parentElement.nodeName === "A" || event.target.closest(".dc-c-search-dialog")) {
         setMenuOpen(false);
       }
     }
@@ -95,10 +95,10 @@ var MobileHeader = function MobileHeader(_ref) {
     };
   }, [menu.current, menuOpen]);
   return /*#__PURE__*/_react["default"].createElement("header", {
-    className: "dc-c-header dc-c-mobile-header ".concat(menuOpen ? 'menu-open' : ''),
+    className: "dc-c-header dc-c-mobile-header ".concat(menuOpen ? "menu-open" : ""),
     "aria-label": "Site header"
   }, includeTopNav && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-cmsheader ds-u-display--flex ds-u-padding-x--1 ds-u-align-items--center ".concat(mobile ? 'ds-u-justify-content--center' : 'ds-u-justify-content--between')
+    className: "dc-c-cmsheader ds-u-display--flex ds-u-padding-x--1 ds-u-align-items--center ".concat(mobile ? "ds-u-justify-content--center" : "ds-u-justify-content--between")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "cms-link-container"
   }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -137,7 +137,6 @@ var MobileHeader = function MobileHeader(_ref) {
   }, customSearch ? customSearch : /*#__PURE__*/_react["default"].createElement(_SearchModal["default"], {
     searchFunc: function searchFunc(e) {
       e.preventDefault();
-      console.log(e.target.value);
     },
     searchModalText: searchModalText,
     buttonSize: "small",
@@ -161,7 +160,6 @@ var MobileHeader = function MobileHeader(_ref) {
   }, customSearch ? customSearch : /*#__PURE__*/_react["default"].createElement(_SearchModal["default"], {
     searchFunc: function searchFunc(e) {
       e.preventDefault();
-      console.log(e.target.value);
     },
     searchModalText: searchModalText,
     buttonSize: "small"
@@ -178,18 +176,18 @@ var MobileHeader = function MobileHeader(_ref) {
     links: links.topnav,
     menuName: "CMS Main Header",
     menuId: "cms-mobile-header",
-    linkClasses: "ds-u-margin-left--1 ds-u-padding-bottom--2",
+    linkClasses: "ds-u-margin-left--1 ds-u-margin-bottom--2",
     menuClasses: "dc-c-header--links ds-u-font-size--small"
   }))));
 };
 
 MobileHeader.defaultProps = {
   org: {
-    tagline: 'The Centers for Medicare and Medicaid Services',
-    url: 'https://cms.gov',
-    urlTitle: 'CMS.gov Centers for Medicare & Medicaid Services',
+    tagline: "The Centers for Medicare and Medicaid Services",
+    url: "https://cms.gov",
+    urlTitle: "CMS.gov Centers for Medicare & Medicaid Services",
     logo: _CMSGovLogoO["default"],
-    logoAltText: 'CMS.gov Centers for Medicare & Medicaid Services',
+    logoAltText: "CMS.gov Centers for Medicare & Medicaid Services",
     inverseLogo: _CMSgov2xWhiteO["default"]
   },
   includeTopNav: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.5.0-alpha.0",
+  "version": "1.6.0-alpha.2",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {