From 96a40a9bbeb66b45c0eaf8627cb80480e14e55f9 Mon Sep 17 00:00:00 2001
From: Bethany Dunfield <brdunfield@gmail.com>
Date: Wed, 10 Jan 2024 10:44:20 -0700
Subject: [PATCH] Migrate to react-query and updated endpoints (#188)

* Install react-query and migrate search page

* fix tests for search page

* Upgrade dataset pages to use react-query. Remove resource reducer and deprecated code

* Remove unused code and migrate last axios call to react-query

* Update loading states

* Update version and remove unused code

* Fixes for tests

* restore resource_reducer and manually control certain aspects of the table

* Restore column ordering to resource_reducer and fix tests
---
 .gitignore                                    |   3 +-
 package.json                                  |   6 +-
 src/components/ColumnFilter/index.jsx         |  24 +-
 .../DataTable/DataTablePageResults/index.jsx  |  11 +-
 .../DataTablePageResults/index.test.jsx       |  39 +-
 .../DataTable/DataTablePageSizer/index.jsx    |  22 +-
 .../DataTablePageSizer/index.test.jsx         |  40 +-
 .../DataTable/ManageColumns/index.jsx         |   5 +-
 src/components/Organization/index.jsx         |  47 +-
 src/components/Resource/index.jsx             | 128 +----
 src/components/Search/functions.js            |  64 +--
 src/components/Search/index.jsx               | 137 +++--
 src/components/Search/index.test.jsx          |  84 +--
 src/components/SearchResultsMessage/index.jsx |   4 +-
 src/index.ts                                  |   6 -
 src/services/resource/api.js                  |  23 -
 src/services/resource/datastore.js            | 136 -----
 src/services/resource/resource_defaults.js    |   5 +-
 src/services/resource/resource_functions.js   | 126 +----
 src/services/resource/resource_reducer.js     |  46 +-
 src/services/search/doc.mdx                   |   4 -
 src/services/search/search_reducer.js         |  57 ---
 src/services/search/search_reducer.test.js    | 106 ----
 src/services/useDatastore/fetch.js            |  67 ---
 src/services/useDatastore/index.js            |   1 -
 src/services/useDatastore/useDatastore.jsx    | 112 ----
 src/templates/DataTable/data.js               |  12 +-
 src/templates/DataTable/datatable.scss        |   4 +-
 src/templates/DataTable/index.jsx             | 482 +++++++++++-------
 src/templates/DataTableHeader/index.jsx       |  27 +-
 src/templates/NavBar/index.jsx                |   2 +-
 src/templates/SearchContent/index.jsx         |  23 +-
 src/templates/SearchSidebar/index.jsx         |  69 +--
 src/tests/utils.js                            |   1 +
 stories/dataset.stories.jsx                   |   9 +-
 yarn.lock                                     |  83 +--
 36 files changed, 670 insertions(+), 1345 deletions(-)
 delete mode 100644 src/services/resource/api.js
 delete mode 100644 src/services/resource/datastore.js
 delete mode 100644 src/services/search/search_reducer.test.js
 delete mode 100644 src/services/useDatastore/fetch.js
 delete mode 100644 src/services/useDatastore/index.js
 delete mode 100644 src/services/useDatastore/useDatastore.jsx

diff --git a/.gitignore b/.gitignore
index 0ae596bf..56dc2b9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@ lib
 dist
 
 .parcel-cache/*
-.DS_Store
\ No newline at end of file
+.DS_Store
+.vscode
\ No newline at end of file
diff --git a/package.json b/package.json
index f5a07c35..af25cf97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/data-catalog-components",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "React Components for Open Data Catalogs.",
   "main": "dist/index.js",
   "source": "src/index.ts",
@@ -26,7 +26,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-table": "^8.10.7",
-    "axios": "^1.6.2",
     "bootstrap": "^4.2.1",
     "excerpts": "0.0.3",
     "html-to-react": "^1.7.0",
@@ -63,7 +62,8 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@tanstack/react-query": "^5.14.1"
   },
   "files": [
     "lib",
diff --git a/src/components/ColumnFilter/index.jsx b/src/components/ColumnFilter/index.jsx
index e9ca8ff8..bca3265e 100644
--- a/src/components/ColumnFilter/index.jsx
+++ b/src/components/ColumnFilter/index.jsx
@@ -1,20 +1,26 @@
-  import React from "react";
+  import React, {useState, useEffect} from "react";
 
   function ColumnFilter({
-    column: { getFilterValue, setFilterValue, Header },
-    resourceState
+    column,
+    count
   }) {
+    const [inputValue, setInputValue] = useState(column.getFilterValue() || '')
+
+    useEffect(() => {
+      const delayedInputTimeout = setTimeout(() => {
+        column.setFilterValue(inputValue || '');
+      }, 500)
+      return () => clearTimeout(delayedInputTimeout);
+    }, [inputValue, 500]);
 
     return (
       <input
-        aria-label={Header}
-        value={getFilterValue() || ''}
+        aria-label={column.columnDef.header}
+        value={inputValue}
         onChange={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setFilterValue(e.target.value || undefined); // Set undefined to remove the filter entirely
+          setInputValue(e.target.value || '')
         }}
-        placeholder={`Search ${resourceState.count} records...`}
+        placeholder={`Search ${count} records...`}
       />
     );
   };
diff --git a/src/components/DataTable/DataTablePageResults/index.jsx b/src/components/DataTable/DataTablePageResults/index.jsx
index 3d5dc727..40b754b3 100644
--- a/src/components/DataTable/DataTablePageResults/index.jsx
+++ b/src/components/DataTable/DataTablePageResults/index.jsx
@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { ResourceDispatch } from '../../../services/resource/resource_defaults';
 import PropTypes from 'prop-types';
 
 const DataTablePageResults = ({
   total,
-  pageSize,
-  currentPage,
   className,
   viewing = false
 }) => {
+  const { resourceState } = useContext(ResourceDispatch);
+  const pageSize = resourceState.pageSize;
+  const currentPage = resourceState.currentPage
+
   // Add one to offset the 0 array index.
   const page = currentPage + 1;
   let displayTotal = total;
@@ -48,8 +51,6 @@ DataTablePageResults.defaultProps = {
 DataTablePageResults.propTypes = {
   className: PropTypes.string,
   total: PropTypes.number.isRequired,
-  pageSize: PropTypes.number.isRequired,
-  currentPage: PropTypes.number.isRequired,
 };
 
 export default DataTablePageResults;
diff --git a/src/components/DataTable/DataTablePageResults/index.test.jsx b/src/components/DataTable/DataTablePageResults/index.test.jsx
index ea115b0c..75abb16c 100644
--- a/src/components/DataTable/DataTablePageResults/index.test.jsx
+++ b/src/components/DataTable/DataTablePageResults/index.test.jsx
@@ -1,39 +1,46 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DataTablePageResults from '.';
+import { ResourceDispatch, defaultResourceState } from '../../../services/resource/resource_defaults';
 import { getByTextContent } from '../../../tests/utils';
 
 describe('<DataTablePageResults />', () => {
+  const dispatch = jest.fn();
   it('renders correct initial results', () => {
+    const resourceState = {
+      pageSize: 10,
+      currentPage: 0
+    }
     render(
-      <DataTablePageResults
-        total={100}
-        pageSize={10}
-        currentPage={0}
-      />,
+      <ResourceDispatch.Provider value={{dispatch, resourceState}}>
+        <DataTablePageResults total={100} />
+      </ResourceDispatch.Provider>
     );
     expect(getByTextContent('1 - 10 of 100 rows')).toBeInTheDocument();
   });
 
   it('renders correct results on subsequent pages', () => {
+    const resourceState = {
+      pageSize: 10,
+      currentPage: 4
+    }
     render(
-      <DataTablePageResults
-        total={100}
-        pageSize={10}
-        currentPage={4}
-      />,
+      <ResourceDispatch.Provider value={{dispatch, resourceState}}>
+        <DataTablePageResults total={100} />
+      </ResourceDispatch.Provider>
     );
     expect(getByTextContent('41 - 50 of 100 rows')).toBeInTheDocument();
   });
 
   it('Correctly displays appended viewing to results list', () => {
+    const resourceState = {
+      pageSize: 10,
+      currentPage: 4
+    }
     render(
-      <DataTablePageResults
-        total={100}
-        pageSize={10}
-        currentPage={4}
-        viewing
-      />,
+      <ResourceDispatch.Provider value={{dispatch, resourceState}}>
+        <DataTablePageResults viewing total={100} />
+      </ResourceDispatch.Provider>
     );
     expect(getByTextContent('Viewing 41 - 50 of 100 rows')).toBeInTheDocument();
   })
diff --git a/src/components/DataTable/DataTablePageSizer/index.jsx b/src/components/DataTable/DataTablePageSizer/index.jsx
index 992aacc3..f2745c69 100644
--- a/src/components/DataTable/DataTablePageSizer/index.jsx
+++ b/src/components/DataTable/DataTablePageSizer/index.jsx
@@ -1,26 +1,28 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import PropTypes from 'prop-types';
+import { ResourceDispatch } from '../../../services/resource/resource_defaults';
 
 const DataTablePageSizer = ({
   label,
-  pageSizeChange,
-  initSize,
   options,
   className,
   selectClassName,
   id,
 }) => {
-  const [selValue, setSelValue] = React.useState(initSize);
-  React.useEffect(() => {
-    pageSizeChange(Number(selValue));
-  }, [selValue]);
+  const {dispatch, resourceState} = useContext(ResourceDispatch);
+  
   return (
     <div className={className}>
       <label htmlFor={`dc-${id}-pagesize`}>{label}</label>
       <select
-        value={selValue}
+        value={resourceState.pageSize}
         className={selectClassName}
-        onChange={(e) => setSelValue(e.target.value)}
+        onChange={(e) => dispatch({
+          type: 'UPDATE_PAGE_SIZE',
+          data: {
+            pageSize: e.target.value
+          }
+        })}
         type="select"
         name={`dc-${id}-pagesize`}
         id={`dc-${id}-pagesize`}
@@ -49,14 +51,12 @@ DataTablePageSizer.propTypes = {
   label: PropTypes.string,
   className: PropTypes.string,
   selectClassName: PropTypes.string,
-  pageSizeChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({
     defaultChecked: PropTypes.bool,
     label: PropTypes.string,
     value: PropTypes.string,
   })),
   id: PropTypes.string.isRequired,
-  initSize: PropTypes.number,
 };
 
 export default DataTablePageSizer;
diff --git a/src/components/DataTable/DataTablePageSizer/index.test.jsx b/src/components/DataTable/DataTablePageSizer/index.test.jsx
index 3a86f8e9..8da36ae2 100644
--- a/src/components/DataTable/DataTablePageSizer/index.test.jsx
+++ b/src/components/DataTable/DataTablePageSizer/index.test.jsx
@@ -2,28 +2,38 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DataTablePageSizer from './index';
+import { ResourceDispatch, defaultResourceState } from '../../../services/resource/resource_defaults';
 
 describe('<DataTablePageSizer />', () => {
+  const resourceState = defaultResourceState;
+  const dispatch = jest.fn();
   test('renders default', () => {
-    render(<DataTablePageSizer pageSizeChange={() => () => true} id="1234" />);
+    render(
+      <ResourceDispatch.Provider value={{dispatch, resourceState}}>
+        <DataTablePageSizer pageSizeChange={() => () => true} id="1234" />
+      </ResourceDispatch.Provider>
+    );
     expect(screen.getByLabelText('Rows per page')).toBeInTheDocument();
   });
   test('renders custom', () => {
     render(
-      <DataTablePageSizer
-        pageSizeChange={() => () => true}
-        id="1234"
-        label="Foobar"
-        currentOption="150"
-        options={[
-          { label: '20', value: '20' },
-          { label: '50', value: '50' },
-          { label: '100', value: '100' },
-          { defaultChecked: true, label: '150', value: '150' },
-          { label: '200', value: '200' },
-          { label: '250', value: '250' },
-        ]}
-      />,
+      <ResourceDispatch.Provider value={{dispatch, resourceState}}>
+        <DataTablePageSizer
+          pageSizeChange={() => () => true}
+          id="1234"
+          label="Foobar"
+          currentOption="150"
+          options={[
+            { label: '20', value: '20' },
+            { label: '50', value: '50' },
+            { label: '100', value: '100' },
+            { defaultChecked: true, label: '150', value: '150' },
+            { label: '200', value: '200' },
+            { label: '250', value: '250' },
+          ]}
+        />
+      </ResourceDispatch.Provider>
+
     );
     expect(screen.getByLabelText('Foobar')).toBeInTheDocument();
   });
diff --git a/src/components/DataTable/ManageColumns/index.jsx b/src/components/DataTable/ManageColumns/index.jsx
index 573b797d..2dc6f6b8 100644
--- a/src/components/DataTable/ManageColumns/index.jsx
+++ b/src/components/DataTable/ManageColumns/index.jsx
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import Card from './Card';
-
-import { ResourceDispatch } from '../../../services/resource/resource_defaults';
 import Modal from '../../Modal';
 
 const defaultCard = (card, index, moveCard) => (
@@ -30,8 +28,8 @@ const defaultCard = (card, index, moveCard) => (
 
 const ManageColumns = ({
   renderCard,
+  reactTable
 }) => {
-  const { reactTable } = useContext(ResourceDispatch);
   const [cards, setCards] = useState(null);
   React.useEffect(() => {
     if (reactTable.getAllColumns().length && cards === null) {
@@ -41,7 +39,6 @@ const ManageColumns = ({
   const moveCard = React.useCallback(
     (dragIndex, hoverIndex) => {
       const newCards = cards.toSpliced(hoverIndex, 0, cards.splice(dragIndex,1)[0]);
-
       setCards(newCards);
     },
     [cards, reactTable.getAllColumns()],
diff --git a/src/components/Organization/index.jsx b/src/components/Organization/index.jsx
index 19be1a47..2ad7c0ef 100644
--- a/src/components/Organization/index.jsx
+++ b/src/components/Organization/index.jsx
@@ -2,35 +2,30 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import PublisherDatasetCountByName from "../PublisherDatasetCountByName";
-import axios from 'axios';
-
-function Organization(props) {
-  const { name,
-          description,
-          imageUrl,
-          searchUrl,
-          alignment,
-          organizationEndpoint} = props;
+import { useQuery } from '@tanstack/react-query';
 
+const Organization = ({
+  name,
+  description,
+  imageUrl,
+  searchUrl,
+  alignment,
+  organizationEndpoint
+}) => {
   const image = <img alt={name || 'Organization Image'} src={imageUrl} />;
   const link = searchUrl ? searchUrl : `/search/?publisher__name=${name}`;
-  const [dataObj, setDataObj] = useState();
+  const endpoint = organizationEndpoint ? organizationEndpoint.replace("api/1", "data.json") : null;
 
-  const fetchData = async () => {
-    const endpoint = organizationEndpoint ? organizationEndpoint.replace("api/1", "data.json") : null;
-    if (endpoint) {
-      axios.get(endpoint)
-        .then(res => (setDataObj(res.data)))
-        .catch(err => (console.log("Error, check URL/Cors.", err)));
-    } else {
-      console.log("No search endpoint defined for Organization/s, so no dataset info available.");
+  const {data} = (endpoint) ? useQuery({
+    queryKey: ['organization'],
+    queryFn: () => {
+      return fetch(endpoint).then(
+        (res) => res.json(),
+      )
     }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
+  }) : {data: undefined};
+  if (!endpoint) console.log("No search endpoint defined for Organization/s, so no dataset info available.");
+  
   return (
     <div className="dc-org-block" style={{ textAlign: alignment }}>
       <Link to={link} className="dc-org-image" alt="Organization Logo">
@@ -45,11 +40,11 @@ function Organization(props) {
         </div>
       )}
 
-      {dataObj && dataObj.dataset !== 'undefined' ?
+      {data && data.dataset !== 'undefined' ?
        <PublisherDatasetCountByName
          name={name}
          datasetCount={
-           countDatasetsByName(name, dataObj.dataset)
+           countDatasetsByName(name, data.dataset)
          } /> :
        <PublisherDatasetCountByName name={name} />
       }
diff --git a/src/components/Resource/index.jsx b/src/components/Resource/index.jsx
index 48d362f3..b4328aa6 100644
--- a/src/components/Resource/index.jsx
+++ b/src/components/Resource/index.jsx
@@ -1,144 +1,56 @@
-import React, { useReducer, useEffect, useState } from 'react';
+import React, { useState , useReducer} from 'react';
 import PropTypes from 'prop-types';
+import { useQuery } from '@tanstack/react-query';
+
 import FileDownload from "../FileDownload";
 import DataTable from '../../templates/DataTable';
 
-import resourceReducer from '../../services/resource/resource_reducer';
-
-import {
-  queryResourceData,
-  getDKANDatastore,
-} from '../../services/resource/resource_functions';
-import useDatastore from '../../services/useDatastore';
+import { prepareColumns, prepareFilterParams } from '../../services/resource/resource_functions';
 
+import resourceReducer from '../../services/resource/resource_reducer';
 import {
   ResourceDispatch,
   defaultResourceState,
 } from '../../services/resource/resource_defaults';
 
-import {
-  useReactTable,
-  flexRender,
-  getCoreRowModel,
-  createColumnHelper,
-  getSortedRowModel,
-  getPaginationRowModel
-} from '@tanstack/react-table';
-import DataTableHeader from '../../templates/DataTableHeader';
-
 const Resource = ({
   apiURL,
   id,
-  showDBColumnNames,
-  transformQueryData: handleTransformQueryData,
   format,
   downloadURL,
   accessURL
 }) => {
+
   const [resourceState, dispatch] = useReducer(
     resourceReducer,
     defaultResourceState,
   );
-  const [columnOrder, setColumnOrder] = useState([]);
-
-  const columnHelper = createColumnHelper();
-
-  useEffect(() => {
-    dispatch({ type: 'GET_STORE' });
-    async function getStore() {
-      if (resourceState.store === null) {
-        dispatch(await getDKANDatastore(apiURL, id, resourceState.pageSize, showDBColumnNames));
-      }
-    }
-    getStore();
-  }, []);
-
-  useEffect(() => {
-    dispatch({ type: 'GET_STORE' });
-
-    async function queryStore() {
-      let resourceData;
-
-      if (handleTransformQueryData) {
-        resourceData = handleTransformQueryData({
-          ...resourceState,
-        });
-      } else {
-        resourceData = resourceState;
-      }
-
-      dispatch(await queryResourceData(resourceData, showDBColumnNames));
-    }
-    if (resourceState.updateQuery) {
-      queryStore();
-    }
-  
-  }, [
-    resourceState.updateQuery,
-    resourceState.currentPage,
-    resourceState.filters,
-    resourceState.pageSize,
-    resourceState.sort,
-  ]);
-
-  const { columns } = resourceState;
-  const data = resourceState.values;
-
-  const table_columns = columns.map((col) => {
-    if (col.cell) {
-      return (
-        columnHelper.accessor(col.accessor, {
-          header: col.header,
-          cell: col.cell,
-          minSize: 215
-        })
+  const filterParams = prepareFilterParams(resourceState.filters);
+  const sort = resourceState.sort.length ? `&sorts[0][property]=${resourceState.sort[0].id}&sorts[0][order]=${resourceState.sort[0].desc ? 'desc' : 'asc'}` : '';
+
+  const {data} = useQuery({
+    queryKey: ['datastore', id + filterParams + resourceState.currentPage + resourceState.pageSize + sort],
+    queryFn: () => {
+      return fetch(`${apiURL}/datastore/query/${id}?limit=${resourceState.pageSize}&offset=${resourceState.currentPage * resourceState.pageSize}${filterParams}${sort}`).then(
+        (res) => res.json(),
       )
     }
-    return (
-      columnHelper.accessor(col.accessor, {
-        header: col.header,
-        minSize: 215
-      })
-    )
   });
 
-  const reactTable = useReactTable(
-    {
-      data: data,
-      columns: table_columns,
-      manualSorting: true,
-      manualFiltering: true,
-      columnResizeMode: 'onChange',
-      onColumnOrderChange: setColumnOrder,
-      initialState: {
-        pagination: {
-          pageSize: resourceState.pageSize,
-        },
-      },
-      state: {
-        columnOrder: columnOrder
-      },
-      pageCount: Number(Math.ceil(resourceState.count / resourceState.pageSize)),
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      debugTable: false,
-      autoResetPageIndex: false,
-    }
-  );
+  const columns = data && data.schema ? Object.keys(data.schema[id].fields) : [];
 
   return (
     <div id="resource">
-      {data.length ? (
-        <ResourceDispatch.Provider value={{dispatch, reactTable, resourceState}}>
+      {data && data.results ? (
+        <ResourceDispatch.Provider value={{dispatch, resourceState}}>
           <FileDownload
             title={"test"}
             label={downloadURL}
             format={format}
             downloadURL={downloadURL ? downloadURL : accessURL}
           />
-          <DataTableHeader />
-          <DataTable />
-        </ResourceDispatch.Provider>
+          <DataTable data={data} columns={prepareColumns(columns)} />
+        </ ResourceDispatch.Provider>
       ) : ('')
     }
     </div>
@@ -147,13 +59,11 @@ const Resource = ({
 
 Resource.defaultProps = {
   showDBColumnNames: false,
-  transformQueryData: null,
 };
 
 Resource.propTypes = {
   apiURL: PropTypes.string.isRequired,
   showDBColumnNames: PropTypes.bool,
-  transformQueryData: PropTypes.func,
 };
 
 export default Resource;
diff --git a/src/components/Search/functions.js b/src/components/Search/functions.js
index 70767fbe..ee502549 100644
--- a/src/components/Search/functions.js
+++ b/src/components/Search/functions.js
@@ -1,4 +1,3 @@
-import axios from 'axios';
 import queryString from 'query-string';
 
 function getSortParams(searchState, sortOptions) {
@@ -12,7 +11,7 @@ function getSortParams(searchState, sortOptions) {
   return returnedSort;
 }
 
-function getApiSearchParams(searchState, defaultFacets, sortOptions) {
+export function getApiSearchParams(searchState, defaultFacets, sortOptions) {
   let state = {};
   state = Object.assign(state, searchState);
 
@@ -47,41 +46,30 @@ function getApiSearchParams(searchState, defaultFacets, sortOptions) {
   return queryString.stringify(apiSearchParams, { arrayFormat: 'comma' });
 }
 
-export default async function getData(
-  searchEndpoint,
-  normalize,
-  searchState,
-  defaultFacets,
-  sortOptions,
-  dispatch,
-  facet,
-) {
-  // Transition to loading state.
-  dispatch({ type: 'FETCH_DATA' });
-
-  const apiParams = getApiSearchParams(searchState, defaultFacets, sortOptions);
-
-  let type = '';
-  let data = {};
-  // make the search api request
-  if (facet) {
-    const results = await axios.get(`${searchEndpoint}/facets?${apiParams}&facets=${facet}`);
-    type = 'SET_FACETS_DATA';
-    data = {
-      facetsResults: results.data.facets,
-    };
-  } else {
-    const results = await axios.get(`${searchEndpoint}?${apiParams}&facets=0`);
-    type = 'SET_SEARCH_DATA';
-    data = {
-      totalItems: results.data.total,
-      items: normalize ? normalize(results.data.results) : results.data.results,
-    };
+export function normalizeItems(resultItems) {
+  let nItems = resultItems;
+  if (!Array.isArray(nItems)) {
+    nItems = Object.values(nItems);
   }
-
-  // dispatch results to reducer
-  dispatch({
-    type,
-    data,
+  return nItems.map((x) => {
+    let item = {};
+    item = {
+      identifier: x.identifier,
+      modified: x.modified,
+      description: x.description,
+      theme: x.theme,
+      format: x.distribution,
+      title: x.title,
+      ref: `/dataset/${x.identifier}`
+    };
+    if (
+      Object.prototype.hasOwnProperty.call(x, "publisher") &&
+      Object.prototype.hasOwnProperty.call(x.publisher, "name")
+    ) {
+      item.publisher = x.publisher.name;
+    } else {
+      item.publisher = "";
+    }
+    return item;
   });
-}
+}
\ No newline at end of file
diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx
index dc717c51..e730ed38 100644
--- a/src/components/Search/index.jsx
+++ b/src/components/Search/index.jsx
@@ -1,40 +1,43 @@
-import React, {
-  useEffect, useState, useReducer, useRef,
-} from 'react';
+import React, { useEffect,useReducer } from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
 import searchReducer from '../../services/search/search_reducer';
 import { SearchDispatch, defaultSearchState } from '../../services/search/search_defaults';
-import getData from './functions';
+
+import { useQuery } from '@tanstack/react-query';
+import SearchContent from "../../templates/SearchContent";
+import SearchSidebar from '../../templates/SearchSidebar';
+import { getApiSearchParams } from './functions';
+
+const getSearchData = (apiParams, searchEndpoint) => {
+  const { isPending, error, data } = useQuery({
+    queryKey: ['searchData', apiParams],
+    queryFn: () => {
+      return fetch(`${searchEndpoint}?${apiParams}&facets=0`).then(
+        (res) => res.json(),
+      )
+    }
+  });
+  return {loading: isPending, data};
+};
 
 const Search = ({
   initialSearchState,
   searchEndpoint,
-  children,
   defaultFacets,
   sortOptions,
   setSearchUrl,
-  path,
-  location,
-  normalize,
-  trailingSlashInUrl,
+  path
 }) => {
   const defaultState = {
     ...defaultSearchState,
     ...initialSearchState,
   };
 
-  const [hasWindow, setHasWindow] = useState(false);
   const [searchState, dispatch] = useReducer(searchReducer, defaultState);
 
-  const firstUrl = useRef(true);
-  const firstFetchSearch = useRef(true);
-  const firstFetchFacet = useRef(true);
-
   // On Mount: Synchronize url params with search state.
   useEffect(() => {
-    setHasWindow(true);
-
     // Set the state from query parameters.
     const params = queryString.parse(window.location.search);
 
@@ -76,59 +79,10 @@ const Search = ({
         });
       }
     });
-
-    // We are relying on a state change to trigger a data fetch.
-    // If we have no parameters to trigger the state change and dispatch,
-    // lets force a data fetch.
-    if (!dispatched) {
-      getData(searchEndpoint, normalize, searchState, defaultFacets, sortOptions, dispatch);
-      Object.keys(defaultFacets).forEach((facet) => {
-        getData(searchEndpoint, normalize, searchState, defaultFacets, sortOptions, dispatch, facet);
-      })
-    }
   }, []);
 
-  // Fetch Search Data.
-  useEffect(() => {
-    if (firstFetchSearch.current) {
-      firstFetchSearch.current = false;
-      return;
-    }
-    getData(searchEndpoint, normalize, searchState, defaultFacets, sortOptions, dispatch);
-  }, [
-    searchState.sort,
-    searchState['sort-order'],
-    searchState.fulltext,
-    searchState['page-size'],
-    searchState.page,
-    searchState.selectedFacets,
-  ]);
-
-  // Fetch Facet Data.
-  useEffect(() => {
-    if (firstFetchFacet.current) {
-      firstFetchFacet.current = false;
-      return;
-    }
-    Object.keys(defaultFacets).forEach((facet) => {
-      getData(searchEndpoint, normalize, searchState, defaultFacets, sortOptions, dispatch, facet);
-    })
-  }, [
-    searchState.sort,
-    searchState['sort-order'],
-    searchState.fulltext,
-    searchState['page-size'],
-    searchState.page,
-    searchState.selectedFacets,
-  ]);
-
   // Update URL.
   useEffect(() => {
-    if (firstUrl.current) {
-      firstUrl.current = false;
-      return;
-    }
-
     const searchParams = {};
     const facetKeys = Object.keys(defaultFacets);
     const state = { ...searchState };
@@ -163,12 +117,8 @@ const Search = ({
     if (setSearchUrl) {
       const loc = window.location;
       let searchUrl = '';
-      if (trailingSlashInUrl) {
-        searchUrl = Object.keys(params).length ? `${path}/?${params}` : `${path}/`;
-      }
-      else {
-        searchUrl = Object.keys(params).length ? `${path}?${params}` : `${path}`;
-      }
+      
+      searchUrl = Object.keys(params).length ? `${path}?${params}` : `${path}`;
       const currentUrl = `${loc.pathname}${loc.search}`;
 
       if (window !== undefined && searchUrl !== currentUrl) {
@@ -176,18 +126,50 @@ const Search = ({
       }
     }
   }, [
-    searchState.items,
-    searchState.facetsResults,
+    searchState.sort,
+    searchState['sort-order'],
+    searchState.fulltext,
+    searchState['page-size'],
+    searchState.page,
+    searchState.selectedFacets,
   ]);
 
+  const apiParams = getApiSearchParams(searchState, defaultFacets, sortOptions);
+  const {loading, data} = getSearchData(apiParams, searchEndpoint);
+
+  // facets
+  let facets = []
+  Object.keys(defaultFacets).forEach((facet) => {
+    const facetResponse = useQuery({
+      queryKey: ['getFacets', facet + apiParams],
+      queryFn: () => {
+        return fetch(`${searchEndpoint}?${apiParams}&facets=${facet}`).then(
+          (res) => res.json(),
+        )
+      }
+    }).data;
+    if(facetResponse && facetResponse.facets) {
+      facetResponse.facets.map((facet) => {
+        facets.push(facet)
+      })
+    }
+  });
+
   return (
     <SearchDispatch.Provider
       value={{
         searchState, dispatch, defaultFacets,
       }}
     >
-      { hasWindow
-      && children }
+      { data && (
+        <div className="row">
+          <SearchContent
+            loading={loading}
+            data={data}
+          />
+          <SearchSidebar facetsResults={facets} sortOptions={sortOptions} />
+        </div>
+      )}
     </SearchDispatch.Provider>
   );
 };
@@ -196,20 +178,15 @@ Search.defaultProps = {
   setSearchUrl: true,
   normalize: null,
   initialSearchState: {},
-  trailingSlashInUrl: true,
 };
 
 Search.propTypes = {
   initialSearchState: PropTypes.objectOf(PropTypes.object),
   searchEndpoint: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
   defaultFacets: PropTypes.objectOf(PropTypes.object).isRequired,
   sortOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
   setSearchUrl: PropTypes.bool,
   path: PropTypes.string.isRequired,
-  location: PropTypes.objectOf(PropTypes.any).isRequired,
-  normalize: PropTypes.func,
-  trailingSlashInUrl: PropTypes.bool,
 };
 
 export default Search;
diff --git a/src/components/Search/index.test.jsx b/src/components/Search/index.test.jsx
index 8bf14b86..99273642 100644
--- a/src/components/Search/index.test.jsx
+++ b/src/components/Search/index.test.jsx
@@ -2,10 +2,9 @@ import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Search from './index';
-import * as axios from "axios";
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
-jest.mock("axios");
-axios.get.mockImplementation(() => {
+global.fetch = jest.fn(() => {
   return Promise.resolve({
     data: {
       total: 0
@@ -25,46 +24,49 @@ describe('<Search />', () => {
   }
 
   test('no facets', async() => {
+    const queryClient = new QueryClient();
     await act(async () => {
       render(
-        <Search
-          location={{}}
-          searchEndpoint=""
-          defaultFacets={{
-            "theme": {
-              "label": "Topics",
-              "field": "theme.0.title",
-              ... base
-            },
-            "keyword": {
-              "label": "Tags",
-              "field": "keyword.*.title",
-              ... base
-            },
-            "publisher__name": {
-              "label": "Publishers",
-              "field": "publisher__name",
-              ... base
-            }
-          }}
-          sortOptions={[
-            {
-              field: 'modified',
-              order: 'desc',
-              label: 'Date'
-            },
-            {
-              field: 'title',
-              order: 'asc',
-              label: 'Alphabetical'
-            }
-          ]}
-          path="/components/search"
-        >
-          <div>
-            <p>search</p>
-          </div>
-        </Search>
+        <QueryClientProvider client={queryClient}>
+          <Search
+            location={{}}
+            searchEndpoint=""
+            defaultFacets={{
+              "theme": {
+                "label": "Topics",
+                "field": "theme.0.title",
+                ... base
+              },
+              "keyword": {
+                "label": "Tags",
+                "field": "keyword.*.title",
+                ... base
+              },
+              "publisher__name": {
+                "label": "Publishers",
+                "field": "publisher__name",
+                ... base
+              }
+            }}
+            sortOptions={[
+              {
+                field: 'modified',
+                order: 'desc',
+                label: 'Date'
+              },
+              {
+                field: 'title',
+                order: 'asc',
+                label: 'Alphabetical'
+              }
+            ]}
+            path="/components/search"
+          >
+            <div>
+              <p>search</p>
+            </div>
+          </Search>
+        </QueryClientProvider>
       );
     });
     expect(screen.queryByRole('listitem')).toBeNull();
diff --git a/src/components/SearchResultsMessage/index.jsx b/src/components/SearchResultsMessage/index.jsx
index aa3c1f3c..0bda729f 100644
--- a/src/components/SearchResultsMessage/index.jsx
+++ b/src/components/SearchResultsMessage/index.jsx
@@ -5,11 +5,9 @@ import SearchResultsMessage2 from './revisions/SearchResultsMessage2';
 const SearchResultsMessage = ({
   searchTerm,
   selectedFacets,
-  facetTypes,
   total,
   showQuery,
   showFacets,
-  facetLimit,
   className,
   facetTitleClass,
   facetListClass,
@@ -75,7 +73,6 @@ SearchResultsMessage.propTypes = {
   facetListClass: PropTypes.string,
   searchQueryClass: PropTypes.string,
   selectedFacets: PropTypes.arrayOf(PropTypes.array).isRequired,
-  facetTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
   total: PropTypes.number.isRequired,
   searchTerm: PropTypes.string.isRequired,
   facetDelimiter: PropTypes.string,
@@ -83,4 +80,5 @@ SearchResultsMessage.propTypes = {
   defaultFacets: PropTypes.objectOf(PropTypes.object).isRequired,
 };
 
+
 export default SearchResultsMessage;
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index bef1d814..786723ca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -39,13 +39,11 @@ export {
   defaultSearchState,
 } from './services/search/search_defaults';
 export {
-  ResourceDispatch,
   defaultResourceState,
 } from './services/resource/resource_defaults';
 
 // SERVICES > REDUCERS
 export { default as searchReducer } from './services/search/search_reducer';
-export { default as resourceReducer } from './services/resource/resource_reducer';
 
 // SERVICES > FUNCTIONS
 export {
@@ -56,10 +54,6 @@ export {
 
 export {
   prepareColumns,
-  queryResourceData,
-  queryAllResourceData,
-  getDKANDatastore,
-  advancedColumns,
 } from './services/resource/resource_functions';
 
 // TEMPLATES
diff --git a/src/services/resource/api.js b/src/services/resource/api.js
deleted file mode 100644
index addff27c..00000000
--- a/src/services/resource/api.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import axios from 'axios';
-
-export const getDatastoreInfo = async (rootUrl, id) => {
-    const { data } = await axios({
-        method: 'GET',
-        operationId: 'getDatastoreInfo',
-        baseURL: rootUrl,
-        url: `/datastore/imports/${id}`
-    })
-
-    return data
-}
-
-export const runSqlQuery = async (rootUrl, query) => {
-  const { data } = await axios({
-    method: 'GET',
-    operationId: 'runSqlQuery',
-    baseURL: rootUrl,
-    url: `/datastore/sql/?query=${query}`
-  })
-
-  return data
-}
diff --git a/src/services/resource/datastore.js b/src/services/resource/datastore.js
deleted file mode 100644
index 7f138118..00000000
--- a/src/services/resource/datastore.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { getDatastoreInfo, runSqlQuery } from "./api";
-
-class Datastore {
-  async query(query = null, fields = null, facets = null, range = null, page = null, sort = null) {
-  }
-}
-
-export class dkan extends Datastore {
-  id = null
-  columns = null
-  rootUrl = null
-  labelToColumns = null
-
-  constructor(id, columns, rootUrl) {
-    super();
-    this.id = id;
-    this.columns = columns;
-    this.rootUrl = rootUrl;
-    this.labelToColumns = [];
-  }
-
-  async query(q = null, fields = null, facets = null, range = null, page = null, sort = null, count = false, showDBColumnNames) {
-    // Get information about column labels.
-    const { columns } = await getDatastoreInfo(this.rootUrl, this.id);
-    this.labelToColumns = columns
-
-    if (sort === null) {
-      sort = [];
-    }
-
-    let sort_object = sort[0]
-
-    if (typeof (sort_object) === 'object') {
-      sort_object = JSON.parse(JSON.stringify(sort_object));
-      const id = this.getRealColumnName(sort_object.id)
-      sort_object.id = id
-    }
-
-    let new_q = [];
-    if (q !== null) {
-      new_q = JSON.parse(JSON.stringify(q));
-    }
-
-    new_q.map((v) => {
-      v.id = this.getRealColumnName(v.id);
-      v.value = `%25${v.value}%25`;
-      return v;
-    });
-
-    const query = this.generateQuery(range, page * range, new_q, sort_object, count, showDBColumnNames);
-
-    const results = await runSqlQuery(this.rootUrl, query)
-
-    return { data: results, count: results.length }
-  }
-
-  generateQuery(limit, offset, where, sort, count, showDBColumnNames) {
-    let where_string = ''
-
-    if (where.length !== 0) {
-      const where_clauses = []
-
-      where.forEach((v, i) => {
-        // Switch delimiter to, and strip any double-quote for Dkan2's sql query.
-        where_clauses[i] = `${v.id} = "${v.value.replace('"', '')}"`
-      });
-
-      where_string = `[WHERE ${where_clauses.join(' AND ')}]`
-    }
-
-    let sort_string = ''
-
-    if (typeof (sort) === 'object') {
-      const id = this.getRealColumnName(sort.id)
-      sort_string = `[ORDER BY ${id}`
-      if (sort.desc === false) {
-        sort_string += ' ASC]'
-      } else {
-        sort_string += ' DESC]'
-      }
-    }
-
-    let fields = ''
-    let limit_string = ''
-
-    if (count) {
-      fields = 'COUNT(*)'
-    } else {
-      fields = '*'
-      limit_string = `[LIMIT ${limit} OFFSET ${offset}]`
-    }
-    const dbColumns = showDBColumnNames ? '&show-db-columns' : ''
-
-    return `[SELECT ${fields} FROM ${this.id}]${where_string}${sort_string}${limit_string};${dbColumns}`
-  }
-
-  /**
-   * Translate a column to the 'real' column name.
-   *
-   * The frontend could be displaying the real column name or a label.
-   * This function returns the correct value needed for querying.
-   *
-   * If we can't determine what the real column name is, we return an empty
-   * string.
-   */
-  getRealColumnName(column) {
-
-    const machineNames = Object.keys(this.labelToColumns);
-
-    if (machineNames.includes(column)) {
-      return column;
-    }
-
-    const realColumn = machineNames.reduce((accumulator, currentValue) => {
-      const info = this.labelToColumns[currentValue]
-
-      if (info.hasOwnProperty('description') &&
-        info.description === column) {
-        accumulator += currentValue;
-      }
-      return accumulator;
-    }, "");
-
-    if (realColumn.length > 0) {
-      return realColumn;
-    }
-
-    return ""
-  }
-}
-
-const datastore = {
-  dkan,
-};
-
-export default datastore;
diff --git a/src/services/resource/resource_defaults.js b/src/services/resource/resource_defaults.js
index d3c86eed..0a8962d8 100644
--- a/src/services/resource/resource_defaults.js
+++ b/src/services/resource/resource_defaults.js
@@ -5,16 +5,13 @@ export const ResourceDispatch = createContext(null);
 export const defaultResourceState = {
   columnOrder: [],
   columns: [],
+  columnVisibility: {},
   count: 0,
   currentPage: 0,
   density: 'density-3',
-  excludedColumns: {},
   filters: [],
   loading: false,
   pageSize: 20,
-  queryAll: false,
   rowsTotal: 0,
   sort: [],
-  store: null,
-  values: [],
 };
diff --git a/src/services/resource/resource_functions.js b/src/services/resource/resource_functions.js
index 74ad3910..255796d8 100644
--- a/src/services/resource/resource_functions.js
+++ b/src/services/resource/resource_functions.js
@@ -1,6 +1,3 @@
-import axios from 'axios';
-import datastore from './datastore';
-
 // Build columns in correct structure for Datatable component.
 export function prepareColumns(columns) {
   return columns.map((column) => ({
@@ -8,115 +5,14 @@ export function prepareColumns(columns) {
     id: column,
     accessor: column,
   }));
-}
-
-// Filter and reorder columns based on the toggled and reordered state.
-// Use this to keep base columns in order so changes can be reset without
-// extra queries to rebuild the data.
-export function advancedColumns(columns = [], updatedColumns = [], excludedColumns = {}) {
-  const excludedArray = [];
-  let newItems = columns;
-  if (updatedColumns.length) {
-    newItems = updatedColumns;
-  }
-  Object.keys(excludedColumns)
-    .forEach((key) => {
-      if (!excludedColumns[key]) {
-        excludedArray.push(key);
-      }
-    });
-  const columnOrder = newItems.reduce((reordered, item) => {
-    if (!excludedArray.includes(item.accessor)) {
-      reordered.push(item);
-    }
-    return reordered;
-  }, []);
-  return columnOrder;
-}
-
-// Create a new datastore using the DKAN datastore.
-export async function getDKANDatastore(rootURL, identifier, initLimit = 20, showDBCols = false) {
-  const checkForDatastore = await axios.get(`${rootURL}datastore/sql/?query=[SELECT COUNT(*) FROM ${identifier}]${showDBCols ? '&show-db-columns' : ''}`)
-    .then((res) => res.data)
-    .catch((e) => {
-      // eslint-disable-next-line no-console
-      console.warn(e.message);
-    });
-  if (checkForDatastore) {
-    // eslint-disable-next-line
-    const sqlColumns = await axios.get(`${rootURL}datastore/sql/?query=[SELECT * FROM ${identifier}][LIMIT ${initLimit} OFFSET 0]${showDBCols ? '&show-db-columns' : ''}`);
-    const store = await new datastore.dkan(identifier, Object.keys(sqlColumns.data[0]), rootURL);
-    return {
-      type: 'USE_STORE',
-      data: {
-        store,
-        rowsTotal: Number(checkForDatastore[0].expression),
-        columns: prepareColumns(Object.keys(sqlColumns.data[0])),
-        storeType: 'DKAN',
-        queryAll: true,
-        values: sqlColumns.data,
-        count: Number(checkForDatastore[0].expression),
-      },
-    };
-  }
-  return {
-    type: 'NO_DATASTORE',
-  };
-}
-
-// Get new rows of data from the datastore.
-export async function queryResourceData(resourceData, showDBCols = false, includeCount = false) {
-  // const {
-  //   filters, pageSize, currentPage, sort, store,
-  // } = resourceData;
-  const items = await resourceData.store.query(
-    resourceData.filters,
-    null,
-    null,
-    resourceData.pageSize,
-    resourceData.currentPage,
-    resourceData.sort,
-    includeCount,
-    showDBCols,
-  ).then((data) => data);
-
-  // Make a second call to get the correct count.
-  const count = await resourceData.store.query(
-    resourceData.filters,
-    null,
-    null,
-    resourceData.pageSize,
-    resourceData.currentPage,
-    resourceData.sort,
-    true,
-    showDBCols,
-  ).then((data) => data);
-
-  let mycount = 0
-
-  if('data' in count && Array.isArray(count.data) && count.data.length > 0 &&
-      'expression' in count.data[0]) {
-    mycount = Number(count.data[0].expression)
-  }
-
-  return {
-    type: 'QUERY_STORE',
-    data: {
-      values: items.data,
-      count: mycount,
-    },
-  };
-}
-
-// Return all rows from the datastore.
-export async function queryAllResourceData(store) {
-  const items = await store.query(null, null, null, 0, null, null)
-    .then((data) => data);
-  return {
-    type: 'QUERY_STORE',
-    data: {
-      values: items.data,
-      count: items.count,
-    },
-  };
-}
+};
+
+// Built query params for filters
+export function prepareFilterParams(filters) {
+  let params = "";
+  filters.forEach((filter, index) => {
+    let param = `&conditions[${index}][property]=${filter.id}&conditions[${index}][value]=${filter.value}&conditions[${index}][operator]=contains`
+    params += param;
+  });
+  return params;
+};
\ No newline at end of file
diff --git a/src/services/resource/resource_reducer.js b/src/services/resource/resource_reducer.js
index dd282866..d3085ddb 100644
--- a/src/services/resource/resource_reducer.js
+++ b/src/services/resource/resource_reducer.js
@@ -1,36 +1,6 @@
 export default function resourceReducer(state, action) {
-  switch (action.type) {
-    case 'GET_STORE':
-      return {
-        ...state,
-        loading: true,
-      };
-    case 'NO_DATASTORE':
-      return {
-        ...state,
-        storeType: null,
-      };
-    case 'USE_STORE':
-      return {
-        ...state,
-        loading: false,
-        values: action.data.values,
-        store: action.data.store,
-        storeType: action.data.storeType,
-        columns: action.data.columns,
-        rowsTotal: action.data.rowsTotal,
-        queryAll: true,
-        count: action.data.count,
-      };
-    case 'QUERY_STORE':
-      return {
-        ...state,
-        loading: false,
-        values: action.data.values,
-        count: action.data.count,
-        queryAll: false,
-        updateQuery: false,
-      };
+  console.log(action)
+  switch(action.type) {
     case 'UPDATE_PAGE':
       return {
         ...state,
@@ -63,19 +33,13 @@ export default function resourceReducer(state, action) {
         columnOrder: action.data.columnOrder,
         updateQuery: true,
       };
-    case 'TOGGLE_COLUMNS':
-      return {
-        ...state,
-        excludedColumns: action.data.excludedColumns,
-        updateQuery: true,
-      };
-    case 'UPDATE_DENSITY':
+    case 'COLUMN_VISIBILITY':
       return {
         ...state,
-        density: action.data.density,
+        columnVisibility: action.data.columnVisibility,
         updateQuery: true,
       };
     default:
       return 'Not a valid action type.';
   }
-}
+}
\ No newline at end of file
diff --git a/src/services/search/doc.mdx b/src/services/search/doc.mdx
index 2e532a87..401f0662 100644
--- a/src/services/search/doc.mdx
+++ b/src/services/search/doc.mdx
@@ -8,10 +8,6 @@ route: /services/search
 
 ## Reducers
 Below is the list of possible reducers available in the Search component.
-1. **FETCH_DATA:** Sets **loading** state to `true`.
-1. **GET_SEARCH_ENGINE:** Sets **loading** to `false`, **searchEngine** to the value passed through `action.data.searchEngine`, **searchType** to the value passed through `action.data.searchType`, and **facets** to the value passed through `action.data.facets`.
-1. **GET_SEARCH_DATA:** Sets **loading** to `false`, **totalItems** to the value passed through `action.data.totalItems`, **items** to the value passed through `action.data.items`, and **facetsResults** to the value passed through `action.data.facetsResults`.
-1. **SET_SEARCH_PARAMETERS:** Sets **searchURL** to the value passed through `action.data.searchURL`.
 1. **UPDATE_SORT:** Sets **sort** to the value passed through `action.data.sort` and sets **sort-order** to the value passed through `action.data['sort-order']`.
 1. **UPDATE_FULLTEXT:** Sets **fulltext** to the value passed through `action.data.fulltext`.
 1. **UPDATE_PAGE_SIZE:** Sets **page-size** to the value passed through `action.data['page-size']` and resets **page** to `1`.
diff --git a/src/services/search/search_reducer.js b/src/services/search/search_reducer.js
index 71580f1e..6d58b53a 100644
--- a/src/services/search/search_reducer.js
+++ b/src/services/search/search_reducer.js
@@ -18,65 +18,8 @@ export function updateSelectedFacetsState(state, action) {
   };
 }
 
-function mergedFacets(state, action) {
-  if (typeof action.data !== 'object' || !Array.isArray(action.data.facetsResults)) {
-    return { ...state }
-  }
-
-  const original = state.facetsResults
-  const facets = action.data.facetsResults
-
-  let final = []
-  if (!Array.isArray(original)) {
-    final = facets
-  }
-  else {
-    final = [...original]
-    facets.forEach((facet) => {
-      const index = original.findIndex( (element) => {
-        return (element.type === facet.type && element.name === facet.name)
-      })
-
-      if (index === -1) {
-        final.push(facet)
-      }
-      else {
-        final[index] = facet
-      }
-    });
-  }
-  return { ...state, facetsResults: final };
-}
-
 export default function searchReducer(state, action) {
   switch (action.type) {
-    case 'FETCH_DATA':
-      return {
-        ...state,
-        loading: true,
-      };
-    case 'GET_SEARCH_ENGINE':
-      return {
-        ...state,
-        loading: false,
-        searchEngine: action.data.searchEngine,
-        searchType: action.data.searchType,
-        facets: action.data.facets,
-      };
-    case 'SET_SEARCH_DATA':
-      return {
-        ...state,
-        loading: false,
-        totalItems: action.data.totalItems,
-        items: action.data.items,
-      };
-    case 'SET_FACETS_DATA':
-      return mergedFacets(state, action)
-    case 'SET_SEARCH_PARAMETERS':
-      return {
-        ...state,
-        searchURL: action.data.searchURL,
-      };
     case 'UPDATE_SORT':
       return {
         ...state,
diff --git a/src/services/search/search_reducer.test.js b/src/services/search/search_reducer.test.js
deleted file mode 100644
index e9771321..00000000
--- a/src/services/search/search_reducer.test.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import '@testing-library/jest-dom';
-import searchReducer from './search_reducer';
-
-describe('search_reducer', () => {
-  test('SET_FACETS_DATA - Empty action', () => {
-    const state = {}
-    const action = {
-      type: 'SET_FACETS_DATA'
-    }
-
-    const newState = searchReducer(state, action);
-    expect(newState).toStrictEqual({})
-  })
-
-  test('SET_FACETS_DATA - action.data.facetResults must be an array', () => {
-    const state = {}
-    const action = {
-      type: 'SET_FACETS_DATA',
-      data: {}
-    }
-
-    expect(
-      searchReducer(state, action)
-    ).toStrictEqual({})
-
-    const action2 = {
-      type: 'SET_FACETS_DATA',
-      data: {
-        facetsResults: {}
-      }
-    }
-
-    expect(
-      searchReducer(state, action2)
-    ).toStrictEqual({})
-
-    const action3 = {
-      type: 'SET_FACETS_DATA',
-      data: {
-        facetsResults: []
-      }
-    }
-
-    expect(
-      searchReducer(state, action3)
-    ).toStrictEqual({ facetsResults: [] })
-
-  })
-
-  test('SET_FACETS_DATA - Update existing facets and add new facets', () => {
-    const state = {
-      facetsResults: [
-        {
-          type: 'keyword',
-          name: 'goodbye',
-          total: 0
-        },
-        {
-          type: 'keyword',
-          name: 'hello',
-          total: 0
-        }
-      ]
-    }
-
-    const action = {
-      type: 'SET_FACETS_DATA',
-      data: {
-        facetsResults: [
-          {
-            type: 'keyword',
-            name: 'hello',
-            total: 1
-          },
-          {
-            type: 'keyword',
-            name: 'hola',
-            total: 2
-          }
-        ]
-      }
-    }
-
-    expect(
-      searchReducer(state, action)
-    ).toStrictEqual({ facetsResults: [
-        {
-          type: 'keyword',
-          name: 'goodbye',
-          total: 0
-        },
-        {
-          type: 'keyword',
-          name: 'hello',
-          total: 1
-        },
-        {
-          type: 'keyword',
-          name: 'hola',
-          total: 2
-        }
-      ] })
-  })
-})
-
-
diff --git a/src/services/useDatastore/fetch.js b/src/services/useDatastore/fetch.js
deleted file mode 100644
index c89c1948..00000000
--- a/src/services/useDatastore/fetch.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import axios from "axios";
-import qs from "qs";
-
-export async function fetchDataFromQuery(
-  id,
-  rootUrl,
-  options,
-  additionalParams
-) {
-  const {
-    keys,
-    limit,
-    offset,
-    conditions,
-    sort,
-    groupings,
-    prepareColumns,
-    properties,
-    setValues,
-    setCount,
-    setColumns,
-    setLoading,
-    setSchema,
-  } = options;
-  if (!id) {
-    // TODO: Throw error
-    return false;
-  }
-  if (typeof setLoading === "function") {
-    setLoading(true);
-  }
-  return await axios({
-    method: "GET",
-    url: `${rootUrl}/datastore/query/${id}`,
-    params: {
-      keys: keys,
-      limit: limit,
-      offset: offset,
-      conditions: conditions,
-      sorts: sort,
-      properties: properties,
-      groupings: groupings,
-      ...additionalParams,
-    },
-    paramsSerializer: {
-      serialize: qs.stringify
-    },
-    // paramsSerializer: (params) => {
-    //   return qs.stringify(params);
-    // },
-  }).then((res) => {
-    const { data } = res;
-    const propertyKeys =
-      data.schema[id] && data.schema[id].fields
-        ? Object.keys(data.schema[id].fields)
-        : [];
-    setValues(data.results), setCount(data.count);
-    if (propertyKeys.length) {
-      setColumns(prepareColumns ? prepareColumns(propertyKeys) : propertyKeys);
-    }
-    setSchema(data.schema);
-    if (typeof setLoading === "function") {
-      setLoading(false);
-    }
-    return data;
-  });
-}
diff --git a/src/services/useDatastore/index.js b/src/services/useDatastore/index.js
deleted file mode 100644
index bdf5b6de..00000000
--- a/src/services/useDatastore/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './useDatastore';
\ No newline at end of file
diff --git a/src/services/useDatastore/useDatastore.jsx b/src/services/useDatastore/useDatastore.jsx
deleted file mode 100644
index cb0a18c9..00000000
--- a/src/services/useDatastore/useDatastore.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { fetchDataFromQuery } from "./fetch";
-
-const useDatastore = (
-  resourceId,
-  rootAPIUrl,
-  options,
-  additionalParams = {}
-) => {
-  const keys = options.keys ? options.keys : true;
-  const { prepareColumns } = options;
-  const [manual, setManual] = useState(options.manual ? options.manual : false);
-  const [requireConditions, setRequireConditions] = useState(
-    options.requireConditions ? options.requireConditions : false
-  );
-  const [values, setValues] = useState([]);
-  const [id, setResource] = useState(resourceId);
-  const [rootUrl, setRootUrl] = useState(rootAPIUrl);
-  const [limit, setLimit] = useState(options.limit ? options.limit : 20);
-  const [count, setCount] = useState(null);
-  const [columns, setColumns] = useState([]);
-  const [offset, setOffset] = useState(options.offset ? options.offset : 0);
-  const [loading, setLoading] = useState(false);
-  const [conditions, setConditions] = useState(
-    options.conditions ? options.conditions : undefined
-  );
-  const [sort, setSort] = useState(options.sort ? options.sort : undefined);
-  const [groupings, setGroupings] = useState(
-    options.groupings ? options.groupings : undefined
-  );
-  const [schema, setSchema] = useState({});
-  // const [joins, setJoins] = useState()
-  const [properties, setProperties] = useState(
-    options.properties ? options.properties : undefined
-  );
-  const prevLimitRef = useRef();
-  const prevOffsetRef = useRef();
-
-  useEffect(() => {
-    prevLimitRef.current = limit;
-    prevOffsetRef.current = offset;
-  });
-  const prevLimit = prevLimitRef.current;
-  const prevOffset = prevOffsetRef.current;
-
-  function fetchData() {
-    let newOffset =
-      prevLimit === limit ? (prevOffset !== offset ? offset : 0) : 0;
-    setOffset(newOffset);
-    fetchDataFromQuery(
-      id,
-      rootUrl,
-      {
-        keys,
-        limit,
-        offset: newOffset,
-        conditions,
-        sort,
-        groupings,
-        prepareColumns,
-        properties,
-        setValues,
-        setCount,
-        setColumns,
-        setLoading,
-        setSchema,
-        setProperties,
-      },
-      additionalParams
-    );
-  }
-
-  useEffect(() => {
-    if (!loading && !manual) {
-      if (!requireConditions) {
-        fetchData();
-      } else if (requireConditions) {
-        if (conditions && conditions.length) {
-          fetchData();
-        } else {
-          setCount(null);
-          setValues([]);
-        }
-      }
-    }
-  }, [id, rootUrl, offset, conditions, sort, limit, requireConditions]);
-
-  return {
-    loading,
-    values,
-    count,
-    columns,
-    limit,
-    offset,
-    schema,
-    conditions,
-    properties,
-    setProperties,
-    setGroupings,
-    setResource,
-    setRootUrl,
-    setLimit,
-    setOffset,
-    setConditions,
-    setSort,
-    setManual,
-    setRequireConditions,
-    fetchData,
-  };
-};
-
-export default useDatastore;
diff --git a/src/templates/DataTable/data.js b/src/templates/DataTable/data.js
index 67d520c0..5d06694a 100644
--- a/src/templates/DataTable/data.js
+++ b/src/templates/DataTable/data.js
@@ -8,7 +8,6 @@ import {
   useResizeColumns,
   useColumnOrder,
 } from 'react-table';
-import { ResourceDispatch } from '../../services/resource/resource_defaults';
 
 const columns = [{"Header":"record_number","accessor":"record_number"},{"Header":"date","accessor":"date"},{"Header":"price","accessor":"price"}];
 const data = [
@@ -49,11 +48,11 @@ const MockResource = ({ children }) => {
 
   const resourceState = {
     columnOrder: [],
+    columnVisibility: {},
     columns,
     count: 20,
     currentPage: 0,
     density: 'density-3',
-    excludedColumns: {},
     filters: [],
     loading: false,
     pageSize: 20,
@@ -132,14 +131,7 @@ const MockResource = ({ children }) => {
 
 
   return (
-    <ResourceDispatch.Provider value={{
-      resourceState,
-      dispatch: () => ({}),
-      reactTable,
-    }}
-    >
-      {children}
-    </ResourceDispatch.Provider>
+    <>{children}</>
   );
 };
 
diff --git a/src/templates/DataTable/datatable.scss b/src/templates/DataTable/datatable.scss
index c14c7567..a8a27529 100644
--- a/src/templates/DataTable/datatable.scss
+++ b/src/templates/DataTable/datatable.scss
@@ -198,8 +198,8 @@ $expandSize: 7px;
   align-items: stretch;
   flex-wrap: wrap;
   padding: 3px;
-  box-shadow: 0 0px 15px 0px rgba(0,0,0, .1);
-  border-top: 2px solid rgba(0,0,0, .1);
+  border: 1px solid rgba(0,0,0, .1);
+  border-top: 0;
 
   .-previous,
   .-next {
diff --git a/src/templates/DataTable/index.jsx b/src/templates/DataTable/index.jsx
index f2bb481c..ed0749b3 100644
--- a/src/templates/DataTable/index.jsx
+++ b/src/templates/DataTable/index.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { ResourceDispatch } from '../../services/resource/resource_defaults';
 import ColumnFilter from '../../components/ColumnFilter';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -9,43 +9,124 @@ import {
   getCoreRowModel,
   createColumnHelper,
   getSortedRowModel,
-  getPaginationRowModel
+  getFilteredRowModel
 } from '@tanstack/react-table';
+import DataTableHeader from '../../templates/DataTableHeader';
 
-const DataTable = () => {
-  const { resourceState, dispatch, reactTable } = useContext(ResourceDispatch);
+const DataTable = ({data, columns}) => {
+  const {dispatch, resourceState} = useContext(ResourceDispatch);
   const [ariaLiveFeedback, setAriaLiveFeedback] = useState('')
   const [columnResizing, setColumnResizing] = useState('');
-  const columns = resourceState.columns;
-  const density = resourceState.density ? `${resourceState.density} -striped -highlight` : '-striped -highlight';
 
-  const { pagination, sorting, columnFilters } = reactTable.getState();
+  const [columnOrder, setColumnOrder] = useState(resourceState.columnOrder);
+  useEffect(() => {
+    if(JSON.stringify(columnOrder) != JSON.stringify(resourceState.columnOrder)) {
+      dispatch({
+        type: 'REORDER_COLUMNS',
+        data: {
+          columnOrder: columnOrder
+        }
+      });
+    }
+  }, [columnOrder]);
+
+  const [columnVisibility, setColumnVisibility] = useState(resourceState.columnVisibility);
+  useEffect(() => {
+    if(JSON.stringify(columnVisibility) != JSON.stringify(resourceState.columnVisibility)) {
+      dispatch({
+        type: 'COLUMN_VISIBILITY',
+        data: {
+          columnVisibility: columnVisibility
+        }
+      });
+    }
+  }, [columnVisibility]);
   
-  React.useEffect(() => {
-    if (resourceState.store) {
-      if (resourceState.currentPage !== pagination.pageIndex) {
-        dispatch({ type: 'UPDATE_PAGE', data: { page: pagination.pageIndex } });
-      }
+  const [sorting, setSorting] = useState(resourceState.sort);
+  useEffect(() => {
+    if(JSON.stringify(sorting) != JSON.stringify(resourceState.sort)) {
+      dispatch({
+        type: 'UPDATE_COLUMN_SORT',
+        data: {
+          sort: sorting
+        }
+      });
     }
-  }, [resourceState.store, pagination.pageIndex]);
-  React.useEffect(() => {
-    if (resourceState.store) {
-      if (resourceState.sorting !== sorting) {
-        dispatch({ type: 'UPDATE_COLUMN_SORT', data: { sort: sorting } });
-      }
+  }, [sorting]);
+
+
+  const [columnFilters, setColumnFilters] = useState(resourceState.filters);
+  useEffect(() => {
+    if(JSON.stringify(columnFilters) != JSON.stringify(resourceState.filters)) {
+      dispatch({
+        type: 'UPDATE_FILTERS',
+        data: {
+          columnFilters: columnFilters
+        }
+      });
     }
-  }, [resourceState.store, sorting]);
-  React.useEffect(() => {
-    if (resourceState.store) {
-      if (resourceState.filters !== columnFilters) {
-        dispatch({ type: 'UPDATE_FILTERS', data: { columnFilters } });
-      }
+  }, [columnFilters]);
+
+  const [density, setDensity] = useState(resourceState.density)
+  const densityClassName = density ? `${density} -striped -highlight` : '-striped -highlight';
+
+  const columnHelper = createColumnHelper();
+  const table_columns = columns.map((col) => {
+    if (col.cell) {
+      return (
+        columnHelper.accessor(col.accessor, {
+          header: col.header,
+          cell: col.cell,
+          minSize: 215
+        })
+      )
     }
-  }, [resourceState.store, columnFilters]);
+    return (
+      columnHelper.accessor(col.accessor, {
+        header: col.header,
+        minSize: 215
+      })
+    )
+  });
+  // reorder based on state
+  if (resourceState.columnOrder.length)
+    table_columns.sort((a,b) => {
+      return resourceState.columnOrder.indexOf(a.header) - resourceState.columnOrder.indexOf(b.header)
+    });
 
+  const reactTable = useReactTable(
+    {
+      data: data.results,
+      columns: table_columns,
+      columnResizeMode: 'onChange',
+      manualSorting: true,
+      onSortingChange: setSorting,
+      onColumnOrderChange: setColumnOrder,
+      onColumnFiltersChange: setColumnFilters,
+      onColumnVisibilityChange: setColumnVisibility,
+      initialState: {
+        columnOrder: columnOrder,
+        pagination: {
+          pageSize: resourceState.pageSize,
+          pageCount: Number(Math.ceil(data.count / resourceState.pageSize)),
+        },
+      },
+      state: {
+        columnOrder: columnOrder,
+        columnVisibility: columnVisibility,
+        columnFilters: columnFilters,
+        sorting: sorting
+      },
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      debugTable: false,
+      autoResetPageIndex: false,
+    }
+  );
   const headerGroups = reactTable.getHeaderGroups();
 
-  const sortIcon = (isSorted, onClickFn) => {
+  const sortIcon = (isSorted) => {
     if(isSorted === 'asc') {
       return 'sort-up'
     }
@@ -55,181 +136,196 @@ const DataTable = () => {
     return 'sort'
   }
 
+  const pageCount = Number(Math.ceil(data.count / resourceState.pageSize));
+
   return (
-    <div className="dc-overflow">
-    <table
-      className={`dc-datatable -striped -highlight ${density}`}
-      {...{
-        style: {
-          width: reactTable.getCenterTotalSize(),
-        },
-      }}
-    >
-      <thead className="dc-thead -header">
-        {columns.length && headerGroups.map((headerGroup) => (
-          <tr
-            role="row"
-            className="tr"
-            key="header"
-          >
-            {headerGroup.headers.map(header => (
-              <th {
-                ...{
-                  key: header.id,
-                  style: {
-                    width: header.getSize(),
-                    position: 'relative'
-                  },
-                  title: header.column.columnDef.header
-                }
-              }
-              className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold dc-c-table-header-cell"
+    <>
+      <DataTableHeader reactTable={reactTable} total={data.count} setDensity={setDensity} />
+      <div className="dc-overflow">
+        <table
+          className={`dc-datatable -striped -highlight ${densityClassName}`}
+          {...{
+            style: {
+              width: reactTable.getCenterTotalSize(),
+            },
+          }}
+        >
+          <thead className="dc-thead -header">
+            {columns.length && headerGroups.map((headerGroup) => (
+              <tr
+                role="row"
+                className="tr"
+                key="header"
               >
-                <div className="dc-sort" >
-                  <span style={{maxWidth: header.getSize() - 16}} >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                      )}
-                  </span>
-                  <button onClick={header.column.getToggleSortingHandler()} aria-label={`${header.column.columnDef.header} sort order`}>
-                    <FontAwesomeIcon icon={["fas", sortIcon((header.column.getIsSorted()))]} />
-                  </button>
-                </div>
-                {header.column.getCanFilter() ? (
-                  <div className="dc-filter">
-                    <ColumnFilter column={header.column} resourceState={resourceState} />
-                  </div>
-                ) : null}
-                <button
-                  {...{
-                    onMouseDown: header.getResizeHandler(),
-                    onTouchStart: header.getResizeHandler(),
-                    className: `dc-c-resize-handle ${
-                      header.column.getIsResizing() || header.column.id == columnResizing ? 'isResizing' : ''
-                    }`,
-                  }}
-                  aria-label={`Resize ${header.column.columnDef.header} column`}
-                  onKeyDown={(e) => {
-                    const columnSizingObject = reactTable.getState().columnSizing;
-                    switch (e.key) {
-                      case 'Enter':
-                      case ' ':
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (columnResizing) {
-                          // end resizing
-                          setColumnResizing('')
-                          setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
-                        } else {
-                          // start resizing
-                          setColumnResizing(header.column.id)
-                          setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`)
-                        }
-                        break;
-
-                      case 'Escape':
-                        if (columnResizing) {
-                          setColumnResizing('')
-                          setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
-                        }
-                        break;
-                      case 'ArrowRight':
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (columnResizing) {
-                          columnSizingObject[header.column.id] = header.getSize() + 10;
-                          reactTable.setColumnSizing(columnSizingObject);
-                          setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
-                        }
-                        break;
-                      case 'ArrowLeft':
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (columnResizing) {
-                          columnSizingObject[header.column.id] = header.getSize() - 10;
-                          reactTable.setColumnSizing(columnSizingObject);
-                          setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`)
-                        }
-                        break;
-                    }
-                  }}
-                  onBlur={() => {
-                    setColumnResizing('')
-                  }}
-                />
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-        
-      <tbody className="dc-tbody">
-        {reactTable.getRowModel().rows.map((row, index) => {
-          const even = (index + 1) % 2 === 0;
-          return(
-            <tr key={row.id} className={`${even ? "dc-c-datatable--even-row" : ""}`}>
-              {row.getVisibleCells().map((cell) => {
-                return (
-                  <td
-                    {...{
-                      key: cell.id,
+                {headerGroup.headers.map(header => (
+                  <th {
+                    ...{
+                      key: header.id,
                       style: {
-                        maxWidth: cell.column.getSize(),
+                        width: header.getSize(),
+                        position: 'relative'
                       },
-                    }}
-                    className={`td dc-td`}
+                      title: header.column.columnDef.header
+                    }
+                  }
+                  className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold dc-c-table-header-cell"
                   >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                );
+                    <div className="dc-sort" >
+                      <span style={{maxWidth: header.getSize() - 16}} >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                          )}
+                      </span>
+                      <button onClick={header.column.getToggleSortingHandler()} aria-label={`${header.column.columnDef.header} sort order`}>
+                        <FontAwesomeIcon icon={["fas", sortIcon((header.column.getIsSorted()))]} />
+                      </button>
+                    </div>
+                    {header.column.getCanFilter() ? (
+                      <div className="dc-filter">
+                        <ColumnFilter column={header.column} count={data.results.length} />
+                      </div>
+                    ) : null}
+                    <button
+                      {...{
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: `dc-c-resize-handle ${
+                          header.column.getIsResizing() || header.column.id == columnResizing ? 'isResizing' : ''
+                        }`,
+                      }}
+                      aria-label={`Resize ${header.column.columnDef.header} column`}
+                      onKeyDown={(e) => {
+                        const columnSizingObject = reactTable.getState().columnSizing;
+                        switch (e.key) {
+                          case 'Enter':
+                          case ' ':
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (columnResizing) {
+                              // end resizing
+                              setColumnResizing('')
+                              setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
+                            } else {
+                              // start resizing
+                              setColumnResizing(header.column.id)
+                              setAriaLiveFeedback(`${header.column.columnDef.header} grabbed.`)
+                            }
+                            break;
+
+                          case 'Escape':
+                            if (columnResizing) {
+                              setColumnResizing('')
+                              setAriaLiveFeedback(`${header.column.columnDef.header} dropped.`)
+                            }
+                            break;
+                          case 'ArrowRight':
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (columnResizing) {
+                              columnSizingObject[header.column.id] = header.getSize() + 10;
+                              reactTable.setColumnSizing(columnSizingObject);
+                              setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`);
+                            }
+                            break;
+                          case 'ArrowLeft':
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (columnResizing) {
+                              columnSizingObject[header.column.id] = header.getSize() - 10;
+                              reactTable.setColumnSizing(columnSizingObject);
+                              setAriaLiveFeedback(`${header.column.columnDef.header} has been resized. The new width is ${header.getSize()} pixels.`)
+                            }
+                            break;
+                        }
+                      }}
+                      onBlur={() => {
+                        setColumnResizing('')
+                      }}
+                    />
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+            
+          <tbody className="dc-tbody">
+            {reactTable.getRowModel().rows.map((row, index) => {
+              const even = (index + 1) % 2 === 0;
+              return(
+                <tr key={row.id} className={`${even ? "dc-c-datatable--even-row" : ""}`}>
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td
+                        {...{
+                          key: cell.id,
+                          style: {
+                            maxWidth: cell.column.getSize(),
+                          },
+                        }}
+                        className={`td dc-td`}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    );
+                  })}
+                </tr>
+              )
               })}
-            </tr>
-          )
-          })}
-      </tbody>
-    </table>
-    <div className='sr-only' aria-live='assertive' aria-atomic='true'>{ariaLiveFeedback}</div>
-    <div className="pagination-bottom">
-      <div className="-pagination">
-        <div className="-previous">
-          <button
-            type="button"
-            onClick={() => reactTable.previousPage()}
-            disabled={!reactTable.getCanPreviousPage()}
-            className="-btn"
-          >
-            {'<'}
-          </button>
+          </tbody>
+        </table>
         </div>
-        <div className="-center">
-          <span className="-pageInfo">
-            Page
-            {' '}
-            <strong>
-              {pagination.pageIndex + 1}
-              {' '}
-              of
-              {' '}
-              {reactTable.getPageCount()}
-            </strong>
-          </span>
-        </div>
-        <div className="-next">
-          <button
-            type="button"
-            onClick={() => reactTable.nextPage()}
-            disabled={!reactTable.getCanNextPage()}
-            className="-btn"
-          >
-            {'>'}
-          </button>
+        <div className='sr-only' aria-live='assertive' aria-atomic='true'>{ariaLiveFeedback}</div>
+        <div className="pagination-bottom">
+          <div className="-pagination">
+            <div className="-previous">
+              <button
+                type="button"
+                onClick={() => dispatch({
+                  type: 'UPDATE_PAGE',
+                  data: {
+                    page: Number(resourceState.currentPage) - 1
+                  }
+                })}
+                disabled={resourceState.currentPage === 0}
+                className="-btn"
+              >
+                {'<'}
+              </button>
+            </div>
+            <div className="-center">
+              <span className="-pageInfo">
+                Page
+                {' '}
+                <strong>
+                  {resourceState.currentPage + 1}
+                  {' '}
+                  of
+                  {' '}
+                  {pageCount}
+                </strong>
+              </span>
+            </div>
+            <div className="-next">
+              <button
+                type="button"
+                onClick={() => dispatch({
+                  type: 'UPDATE_PAGE',
+                  data: {
+                    page: Number(resourceState.currentPage) + 1
+                  }
+                })}
+                disabled={resourceState.currentPage >= (pageCount-1) }
+                className="-btn"
+              >
+                {'>'}
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/templates/DataTableHeader/index.jsx b/src/templates/DataTableHeader/index.jsx
index 5ad64a7d..c509a87d 100644
--- a/src/templates/DataTableHeader/index.jsx
+++ b/src/templates/DataTableHeader/index.jsx
@@ -1,37 +1,26 @@
 import React from 'react';
-import { ResourceDispatch } from '../../services/resource/resource_defaults';
 import ManageColumns from '../../components/DataTable/ManageColumns';
 import DataTablePageResults from '../../components/DataTable/DataTablePageResults';
 import DataTableDensity from '../../components/DataTable/DataTableDensity';
 import DataTablePageSizer from '../../components/DataTable/DataTablePageSizer';
 import DataIcon from '../../components/DataIcon';
 
-const DataTableHeader = () => {
-  const { reactTable, resourceState, dispatch } = React.useContext(ResourceDispatch);
+const DataTableHeader = ({reactTable, total, setDensity}) => {
+  const columns = reactTable.getAllColumns();
 
   return (
     <div className="dc-datatable-header">
-      {resourceState.store
+      {reactTable
         && (
         <>
           <DataTablePageResults
-            total={resourceState.count}
-            pageSize={resourceState.pageSize}
-            currentPage={resourceState.currentPage}
+            total={total}
           />
           <DataTablePageSizer
-            pageSizeChange={(value) => {
-                dispatch({
-                type: 'UPDATE_PAGE_SIZE',
-                data: { pageSize: value },
-              });
-              reactTable.resetPagination();
-            }}
-            id={resourceState.store.id}
-            initSize={resourceState.pageSize}
+            id={""} //todo
           />
           <DataTableDensity
-            densityChange={(density) => dispatch({ type: 'UPDATE_DENSITY', data: { density } })}
+            densityChange={(density) => setDensity(density)}
             items={[
               {
                 icon: (
@@ -74,8 +63,8 @@ const DataTableHeader = () => {
               },
             ]}
           />
-          {reactTable.getAllColumns()
-            && <ManageColumns /> }
+          {columns ? 
+             <ManageColumns reactTable={reactTable} />: ""}
         </>
         )}
     </div>
diff --git a/src/templates/NavBar/index.jsx b/src/templates/NavBar/index.jsx
index 33fef288..b2d59a0d 100644
--- a/src/templates/NavBar/index.jsx
+++ b/src/templates/NavBar/index.jsx
@@ -21,7 +21,7 @@ const NavBar = ({
           <div className="dc-toggle">
             <NavbarToggler onClick={() => toggleOpen(!isOpen)}>
               <FontAwesomeIcon
-                icon="fa-bars"
+                icon={['fas', 'bars' ]}
                 aria-hidden="true"
                 role="presentation"
               />
diff --git a/src/templates/SearchContent/index.jsx b/src/templates/SearchContent/index.jsx
index 64eb783b..6f49be42 100644
--- a/src/templates/SearchContent/index.jsx
+++ b/src/templates/SearchContent/index.jsx
@@ -5,18 +5,19 @@ import SearchListItem from '../../components/SearchListItem';
 import SearchInput from '../../components/SearchInput';
 import SearchPaginationResults from '../../components/SearchPaginationResults';
 import SearchPageSizer from '../../components/SearchPageSizer';
-import { SearchDispatch } from '../../services/search/search_defaults';
 import { List } from 'react-content-loader';
+import { normalizeItems } from "../../components/Search/functions";
+import { SearchDispatch } from '../../services/search/search_defaults';
 
-const SearchContent = () => {
+const SearchContent = ({loading, data}) => {
   const { searchState, dispatch, defaultFacets } = useContext(SearchDispatch);
-  const { items, fulltext, totalItems, selectedFacets, loading } = searchState;
+  const { fulltext, selectedFacets } = searchState;
   const facetTypes = Object.keys(defaultFacets);
-
+  const items = data.results ? normalizeItems(data.results) : [];
+  const Loading = () => <List />
   return (
     <div className="dc-results-list col-md-8 col-sm-12">
-      {items
-      && (
+      {items && (
         <div>
           <SearchInput
             placeholder="Type your search term here"
@@ -29,7 +30,7 @@ const SearchContent = () => {
           />
           <SearchResultsMessage
             searchTerm={fulltext}
-            total={parseInt(totalItems, 10)}
+            total={parseInt(data.total, 10)}
             selectedFacets={selectedFacets}
             facetTypes={facetTypes}
             defaultFacets={defaultFacets}
@@ -38,9 +39,9 @@ const SearchContent = () => {
             facetSeparator=" &amp; "
           />
 
-          {loading ?
+          {loading || !items || !items.length ?
            <div>
-             <List/>
+             <Loading />
            </div>  :
            <ol>
              {items.map((item) => (
@@ -52,7 +53,7 @@ const SearchContent = () => {
 
           <div className="dc-pagination-container">
             <SearchPaginationResults
-              total={Number(totalItems)}
+              total={Number(data.total)}
               pageSize={Number(searchState['page-size'])}
               currentPage={Number(searchState.page)}
             />
@@ -67,7 +68,7 @@ const SearchContent = () => {
               hideDisabled
               activePage={searchState.page}
               itemsCountPerPage={Number(searchState['page-size'])}
-              totalItemsCount={Number(totalItems)}
+              totalItemsCount={Number(data.total)}
               pageRangeDisplayed={5}
               onChange={(e) => dispatch({
                 type: 'UPDATE_CURRENT_PAGE',
diff --git a/src/templates/SearchSidebar/index.jsx b/src/templates/SearchSidebar/index.jsx
index aa6b9125..0e460ab1 100644
--- a/src/templates/SearchSidebar/index.jsx
+++ b/src/templates/SearchSidebar/index.jsx
@@ -1,47 +1,58 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Label, Input } from 'reactstrap';
+import { Label, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import SearchFacets from '../../components/SearchFacets';
 import { SearchDispatch } from '../../services/search/search_defaults';
 import { BulletList } from 'react-content-loader';
 
-const SearchSidebar = ({ sortOptions }) => {
+const SearchSidebar = ({ sortOptions, facetsResults }) => {
   const { searchState, dispatch, defaultFacets } = useContext(SearchDispatch);
-  const { facetsResults, loading } = searchState;
+  const { loading, sort } = searchState;
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const toggle = () => setDropdownOpen((prevState) => !prevState);
+  
+  const label = sortOptions.filter((s) => {
+    return s.field == sort;
+  })[0].label
 
+  const Loading = () => <BulletList />
+  
   return (
     <div className="dc-search-sidebar col-md-4 col-sm-12">
       <div className="dc-search-sidebar-options">
-        <Label for="dc-search-list-sort">Sort by:</Label>
-        <Input
-          type="select"
+        <Label id="search-list-sort-label">Sort by:</Label>
+        <Dropdown
           name="dc-search-list-sort"
           id="dc-search-list-sort"
-          onChange={(e) => {
-            dispatch({ type: 'UPDATE_SORT', data: { sort: e.target.value } });
-          }}
+          aria-labelledby='search-list-sort-label'
+          toggle={toggle}
+          isOpen={dropdownOpen}
         >
-          {sortOptions.map((sortOpt) => (
-            <option
-              key={sortOpt.field}
-              value={sortOpt.field}
-            >
-              {sortOpt.label}
-            </option>
-          ))}
-        </Input>
+          <DropdownToggle caret><span>{label}</span></DropdownToggle>
+          <DropdownMenu>
+            {sortOptions.map((sortOpt) => (
+              <DropdownItem
+                key={sortOpt.field}
+                value={sortOpt.field}
+                onClick={(e) => {
+                  dispatch({ type: 'UPDATE_SORT', data: { sort: sortOpt.field, "sort-order": sortOpt.order } });
+                }}
+              >
+                {sortOpt.label}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </Dropdown>
       </div>
       <div className="dc-search-sidebar-options">
-        {loading ? <BulletList / > :
-        facetsResults && facetsResults.length
-          && (
-            <SearchFacets
-              facetsConfig={defaultFacets}
-              facetsResults={facetsResults}
-              selectedFacets={searchState.selectedFacets}
-              dispatch={dispatch}
-            />
-          )
+        {loading || !facetsResults || !facetsResults.length ?
+          <Loading /> :
+          <SearchFacets
+            facetsConfig={defaultFacets}
+            facetsResults={facetsResults}
+            selectedFacets={searchState.selectedFacets}
+            dispatch={dispatch}
+          />
         }
       </div>
     </div>
diff --git a/src/tests/utils.js b/src/tests/utils.js
index 629712af..424a9cb1 100644
--- a/src/tests/utils.js
+++ b/src/tests/utils.js
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 
 export const getByTextContent = (text) => {
+  console.log(text)
   return screen.getByText((content, element) => {
     const hasText = element => element.textContent === text
     const elementHasText = hasText(element)
diff --git a/stories/dataset.stories.jsx b/stories/dataset.stories.jsx
index 67da2e44..2f519512 100755
--- a/stories/dataset.stories.jsx
+++ b/stories/dataset.stories.jsx
@@ -28,7 +28,6 @@ import tables from './data/tables.json';
 import '../src/theme/styles/index.scss';
 import TopicIcon from '../src/templates/TopicIcon';
 import TopicWrapper from '../src/components/TopicWrapper';
-import { ResourceDispatch } from '../src/services/resource/resource_defaults';
 import DataTable from '../src/templates/DataTable';
 import { resourceData } from './data/resourceData';
 
@@ -179,11 +178,5 @@ storiesOf('Dataset', module)
       useSortBy,
       usePagination,
     );
-    return (
-      <ResourceDispatch.Provider
-        value={{ resourceState: resourceData, dispatch: () => ({}), reactTable }}
-      >
-        <DataTable />
-      </ResourceDispatch.Provider>
-    );
+    return ( <DataTable /> );
   });
diff --git a/yarn.lock b/yarn.lock
index 05ef23d1..35ed111a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-"@adobe/css-tools@^4.3.1":
+"@adobe/css-tools@^4.3.2":
   version "4.3.2"
   resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz"
   integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
@@ -2450,6 +2450,18 @@
   resolved "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
+"@tanstack/query-core@5.14.1":
+  version "5.14.1"
+  resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.14.1.tgz"
+  integrity sha512-TlZarySCVEiap4K7BCvrsYZnX7jBbEkR55YMrk8ELcRbuAx6ydL+qoxqUt8Fq8VMvQyGt52icn6T7eJL1Q35KQ==
+
+"@tanstack/react-query@^5.14.1":
+  version "5.14.1"
+  resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.14.1.tgz"
+  integrity sha512-v7jhe/3jhChiR0XJbGHaG5WNPd/cURwzDGBCr4rzpUTeudPzxrtVRKsF1xJRLcJK3qH/0gIwTYHIPZ3gj+01Yw==
+  dependencies:
+    "@tanstack/query-core" "5.14.1"
+
 "@tanstack/react-table@^8.10.7":
   version "8.10.7"
   resolved "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.10.7.tgz"
@@ -2477,16 +2489,16 @@
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@^6.1.5":
-  version "6.1.5"
-  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.5.tgz"
-  integrity sha512-3y04JLW+EceVPy2Em3VwNr95dOKqA8DhR0RJHhHKDZNYXcVXnEK7WIrpj4eYU8SVt/qYZ2aRWt/WgQ+grNES8g==
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.2.0.tgz"
+  integrity sha512-+BVQlJ9cmEn5RDMUS8c2+TU6giLvzaHZ8sU/x0Jj7fk+6/46wPdwlgOPcpxS17CjcanBi/3VmGMqVr2rmbUmNw==
   dependencies:
-    "@adobe/css-tools" "^4.3.1"
+    "@adobe/css-tools" "^4.3.2"
     "@babel/runtime" "^7.9.2"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
+    dom-accessibility-api "^0.6.3"
     lodash "^4.17.15"
     redent "^3.0.0"
 
@@ -2500,9 +2512,9 @@
     "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@^14.5.1":
-  version "14.5.1"
-  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz"
-  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+  version "14.5.2"
+  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -2531,9 +2543,9 @@
     "@types/babel__traverse" "*"
 
 "@types/babel__generator@*":
-  version "7.6.7"
-  resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz"
-  integrity sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==
+  version "7.6.8"
+  resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
   dependencies:
     "@babel/types" "^7.0.0"
 
@@ -2546,9 +2558,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
-  version "7.20.4"
-  resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz"
-  integrity sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==
+  version "7.20.5"
+  resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz"
+  integrity sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==
   dependencies:
     "@babel/types" "^7.20.7"
 
@@ -2863,14 +2875,14 @@ acorn@^6.4.1:
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
 acorn@^8.1.0:
-  version "8.11.2"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+  version "8.11.3"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
 acorn@^8.8.1:
-  version "8.11.2"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+  version "8.11.3"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
 acorn@^8.8.2:
   version "8.11.2"
@@ -2982,14 +2994,7 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz"
-  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
-  dependencies:
-    dequal "^2.0.3"
-
-aria-query@5.1.3:
+aria-query@^5.0.0, aria-query@5.1.3:
   version "5.1.3"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
   integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
@@ -3079,7 +3084,7 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axios@^1.4.0, axios@^1.6.2:
+axios@^1.4.0:
   version "1.6.2"
   resolved "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz"
   integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
@@ -4170,11 +4175,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-dequal@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
-  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
-
 des.js@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz"
@@ -4226,11 +4226,16 @@ dnd-core@^16.0.1:
     "@react-dnd/invariant" "^4.0.1"
     redux "^4.2.0"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-accessibility-api@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz"
+  integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
+
 dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
@@ -9235,9 +9240,9 @@ write-file-atomic@^4.0.2:
     signal-exit "^3.0.7"
 
 ws@^8.11.0:
-  version "8.15.1"
-  resolved "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz"
-  integrity sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==
+  version "8.16.0"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz"
+  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
 
 xml-but-prettier@^1.0.1:
   version "1.0.1"