feat: Results table on Explore view

superset-frontend/cypress-base/cypress/integration/explore/visualizations/big_number.test.js

@@ -75,8 +75,8 @@ describe('Visualization > Big Number with Trendline', () => {
       ...BIG_NUMBER_FORM_DATA,
       show_trend_line: false,
     });
-    cy.get('.chart-container .header-line');
-    cy.get('.chart-container .subheader-line');
-    cy.get('.chart-container svg').should('not.exist');
+    cy.get('[data-test="chart-container"] .header-line');
+    cy.get('[data-test="chart-container"] .subheader-line');
+    cy.get('[data-test="chart-container"] svg').should('not.exist');
   });
 });

superset-frontend/package.json

@@ -151,7 +151,7 @@
     "react-select": "^3.1.0",
     "react-select-async-paginate": "^0.4.1",
     "react-sortable-hoc": "^1.11.0",
-    "react-split": "^2.0.4",
+    "react-split": "^2.0.9",
     "react-sticky": "^6.0.3",
     "react-syntax-highlighter": "^15.3.0",
     "react-table": "^7.2.1",

superset-frontend/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx

@@ -50,7 +50,7 @@ describe('DisplayQueryButton', () => {
         theme: supersetTheme,
       },
     });
-    expect(wrapper.find(ModalTrigger)).toHaveLength(3);
-    expect(wrapper.find(Menu.Item)).toHaveLength(5);
+    expect(wrapper.find(ModalTrigger)).toHaveLength(1);
+    expect(wrapper.find(Menu.Item)).toHaveLength(3);
   });
 });

superset-frontend/src/chart/Chart.jsx

@@ -81,6 +81,8 @@ const defaultProps = {
 };
 
 const Styles = styled.div`
+  position: relative;
+  height: 100%;
   .chart-tooltip {
     opacity: 0.75;
     font-size: ${({ theme }) => theme.typography.sizes.s}px;

superset-frontend/src/explore/components/DataTableControl.tsx

@@ -0,0 +1,105 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useMemo } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { FormControl } from 'react-bootstrap';
+import debounce from 'lodash/debounce';
+import Button from 'src/components/Button';
+import {
+  applyFormattingToTabularData,
+  prepareCopyToClipboardTabularData,
+} from 'src/utils/common';
+import CopyToClipboard from 'src/components/CopyToClipboard';
+import RowCountLabel from './RowCountLabel';
+
+export const CopyButton = styled(Button)`
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+
+  // needed to override button's first-of-type margin: 0
+  && {
+    margin: 0 ${({ theme }) => theme.gridUnit * 2}px;
+  }
+
+  i {
+    padding: 0 ${({ theme }) => theme.gridUnit}px;
+  }
+`;
+
+export const CopyToClipboardButton = ({
+  data,
+}: {
+  data?: Record<string, any>;
+}) => (
+  <CopyToClipboard
+    text={data ? prepareCopyToClipboardTabularData(data) : ''}
+    wrapped={false}
+    copyNode={
+      <CopyButton buttonSize="xs">
+        <i className="fa fa-clipboard" />
+      </CopyButton>
+    }
+  />
+);
+
+export const FilterInput = ({
+  onChangeHandler,
+}: {
+  onChangeHandler(filterText: string): void;
+}) => {
+  const debouncedChangeHandler = debounce(onChangeHandler, 500);
+  return (
+    <FormControl
+      placeholder={t('Search')}
+      bsSize="sm"
+      onChange={(event: any) => {
+        const filterText = event.target.value;
+        debouncedChangeHandler(filterText);
+      }}
+    />
+  );
+};
+
+export const RowCount = ({ data }: { data?: Record<string, any>[] }) => (
+  <RowCountLabel rowcount={data?.length ?? 0} suffix={t('rows retrieved')} />
+);
+
+export const useFilteredTableData = (
+  filterText: string,
+  data?: Record<string, any>[],
+) =>
+  useMemo(() => {
+    if (!data?.length) {
+      return [];
+    }
+    const formattedData = applyFormattingToTabularData(data);
+    return formattedData.filter((row: Record<string, any>) =>
+      Object.values(row).some(value =>
+        value.toString().toLowerCase().includes(filterText.toLowerCase()),
+      ),
+    );
+  }, [data, filterText]);
+
+export const useTableColumns = (data?: Record<string, any>[]) =>
+  useMemo(
+    () =>
+      data?.length
+        ? Object.keys(data[0]).map(key => ({ accessor: key, Header: key }))
+        : [],
+    [data],
+  );