[feat] toast grid 추가

2022-09-22 18:57:46 +09:00
parent 0105764f74
commit e53b9d2f4a
8 changed files with 333 additions and 38 deletions
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_13" project-jdk-name="13" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager">
    <output url="file://$PROJECT_DIR$/out" />
  </component>
 </project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,10 +2,6 @@
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
-      <module fileurl="file://$PROJECT_DIR$/backend-api/backend-api.iml" filepath="$PROJECT_DIR$/backend-api/backend-api.iml" />
-      <module fileurl="file://$PROJECT_DIR$/design/design.iml" filepath="$PROJECT_DIR$/design/design.iml" />
-      <module fileurl="file://$PROJECT_DIR$/docs/docs.iml" filepath="$PROJECT_DIR$/docs/docs.iml" />
-      <module fileurl="file://$PROJECT_DIR$/frontend-web/frontend-web.iml" filepath="$PROJECT_DIR$/frontend-web/frontend-web.iml" />
      <module fileurl="file://$PROJECT_DIR$/.idea/vanillameta.iml" filepath="$PROJECT_DIR$/.idea/vanillameta.iml" />
    </modules>
  </component>
--- a/frontend-web/package-lock.json
+++ b/frontend-web/package-lock.json
@@ -8122,6 +8122,14 @@
        "@babel/runtime": "^7.12.5"
      }
    },
+    "@toast-ui/react-grid": {
+      "version": "4.21.4",
+      "resolved": "https://registry.npmjs.org/@toast-ui/react-grid/-/react-grid-4.21.4.tgz",
+      "integrity": "sha512-rI88bBi2Dwj/gfBzxGZ0HQVO3L+1eAs3MapO7vukA41elL40aAegPlRcKypojhFVGnkVeBr/TK7qmjDXOvIaDQ==",
+      "requires": {
+        "tui-grid": "^4.21.4"
+      }
+    },
    "@tootallnate/once": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -9172,6 +9180,15 @@
        "regex-parser": "^2.2.11"
      }
    },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
    "agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -10617,6 +10634,22 @@
      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
      "dev": true
    },
+    "cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "dependencies": {
+        "adler-32": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+          "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
+        }
+      }
+    },
    "chalk": {
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -10889,6 +10922,11 @@
        "q": "^1.1.2"
      }
    },
+    "codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+    },
    "collapse-white-space": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -11480,6 +11518,11 @@
      "integrity": "sha512-N+Qaf/Gr/f3o5ZH2TQjMu5NhR9PnT1ZYsfejpNvZPpB0ujdrhsSr4Ct6GVjnV5ostCVquhTKJpIVBKyL9qDQYA==",
      "dev": true
    },
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
    "create-ecdh": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -12261,6 +12304,11 @@
        "domelementtype": "^2.2.0"
      }
    },
+    "dompurify": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
+      "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA=="
+    },
    "domutils": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -13423,6 +13471,11 @@
      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ=="
    },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
    "expand-brackets": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -14088,6 +14141,11 @@
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
    },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
    "fraction.js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -19649,6 +19707,11 @@
      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
      "dev": true
    },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
    "prismjs": {
      "version": "1.28.0",
      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
@@ -22153,6 +22216,14 @@
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
    },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
    "ssr-window": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
@@ -23161,6 +23232,35 @@
      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==",
      "dev": true
    },
+    "tui-date-picker": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-4.3.1.tgz",
+      "integrity": "sha512-LMXdiM6cXau4NVw3/1T4ltaLk2PZAn2RbRtVUPN30Zg905t9Ab+OJ8EgeEgLVW9osvLuO9raW63l7YwiT50v6Q==",
+      "requires": {
+        "tui-time-picker": "^2.1.3"
+      }
+    },
+    "tui-grid": {
+      "version": "4.21.4",
+      "resolved": "https://registry.npmjs.org/tui-grid/-/tui-grid-4.21.4.tgz",
+      "integrity": "sha512-ngPJ29f+KoKDVbVm+aoMeHbZnGeNSGqpiFH+QpYuoIC60RHL2mVGOG5qDKnfoina6GUkW2KGLJ9pp4i8kvBaLw==",
+      "requires": {
+        "dompurify": "^2.3.9",
+        "tui-date-picker": "^4.1.0",
+        "tui-pagination": "^3.4.0",
+        "xlsx": "^0.17.1"
+      }
+    },
+    "tui-pagination": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tui-pagination/-/tui-pagination-3.4.1.tgz",
+      "integrity": "sha512-W09L0wPMSFstthBhQjcLNDnN1yuCEDn/tIXmaKdTpNFYa11eNrNo/rOwXzrugXvP2arZ60KmVhkFzoAOEuV0Sg=="
+    },
+    "tui-time-picker": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-2.1.4.tgz",
+      "integrity": "sha512-gqCasZgniE8slP83h3pUnSXyVWBBi7T+9gi0+RxB6ld6l2hgPuVax8o82ysz02pvQ5bEkfPP3sG1caeU+iH0Sw=="
+    },
    "type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -24535,6 +24635,16 @@
        }
      }
    },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
    "word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -24897,6 +25007,20 @@
        "default-browser-id": "^1.0.4"
      }
    },
+    "xlsx": {
+      "version": "0.17.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.5.tgz",
+      "integrity": "sha512-lXNU0TuYsvElzvtI6O7WIVb9Zar1XYw7Xb3VAx2wn8N/n0whBYrCnHMxtFyIiUU1Wjf09WzmLALDfBO5PqTb1g==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.0",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      }
+    },
    "xml-name-validator": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
--- a/frontend-web/package.json
+++ b/frontend-web/package.json
@@ -20,6 +20,7 @@
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
+    "@toast-ui/react-grid": "^4.21.4",
    "ace-builds": "^1.10.1",
    "axios": "^0.27.2",
    "echarts": "^5.3.3",
--- a/frontend-web/src/App.tsx
+++ b/frontend-web/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { CssBaseline } from '@mui/material';
 import Layout from './layouts/Layout';
 import Router from './router';
+import 'tui-grid/dist/tui-grid.css'; // tui grid style file

 function App() {
  return (
--- a/frontend-web/src/components/DataGrid/index.tsx
+++ b/frontend-web/src/components/DataGrid/index.tsx
@@ -0,0 +1,62 @@
+import Grid from '@toast-ui/react-grid';
+import React, { HTMLAttributes, useContext, useEffect, useRef } from 'react';
+import { GridEventListener, GridOptions } from 'tui-grid';
+
+type EventNameMapping = {
+  onClick: 'click';
+  onDblclick: 'dblclick';
+  onMousedown: 'mousedown';
+  onMouseover: 'mouseover';
+  onMouseout: 'mouseout';
+  onFocusChange: 'focusChange';
+  onColumnResize: 'columnResize';
+  onCheck: 'check';
+  onUncheck: 'uncheck';
+  onCheckAll: 'checkAll';
+  onUncheckAll: 'uncheckAll';
+  onSelection: 'selection';
+  onEditingStart: 'editingStart';
+  onEditingFinish: 'editingFinish';
+  onSort: 'sort';
+  onFilter: 'filter';
+  onScrollEnd: 'scrollEnd';
+  onBeforeRequest: 'beforeRequest';
+  onResponse: 'response';
+  onSuccessResponse: 'successResponse';
+  onFailResponse: 'failResponse';
+  onErrorResponse: 'errorResponse';
+};
+
+type EventMaps = {
+  [K in keyof EventNameMapping]?: GridEventListener;
+};
+
+type Props = Omit<GridOptions, 'el'> &
+  EventMaps &
+  HTMLAttributes<HTMLElement> & {
+    oneTimeBindingProps?: Array<'data' | 'columns' | 'bodyHeight' | 'frozenColumnCount'>;
+  };
+
+const DataGrid = (props: Props) => {
+  const gridRef = useRef();
+
+  return (
+    <Grid
+      ref={gridRef}
+      header={{
+        height: 36,
+        align: 'center',
+      }}
+      rowHeight={36}
+      minRowHeight={36}
+      minBodyHeight={300}
+      usageStatistics={true}
+      columnOptions={{
+        resizable: true,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default DataGrid;
--- a/frontend-web/src/components/button/SubmitButton.tsx
+++ b/frontend-web/src/components/button/SubmitButton.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { Alert, Box, Button, IconButton, Stack } from '@mui/material';
 import { Close } from '@mui/icons-material';

-function SubmitButton(props) {
+const SubmitButton = props => {
+  const { onClick } = props;
  const [open, setOpen] = React.useState(false);

  const handleClick = event => {
@@ -23,7 +24,7 @@ function SubmitButton(props) {
        size="large"
        sx={{ mt: 3, mx: 2, ml: 0 }}
        fullWidth
-        onClick={handleClick}
+        onClick={onClick}
      >
        {props.label}
      </Button>
@@ -43,6 +44,6 @@ function SubmitButton(props) {
      )}
    </Box>
  );
-}
+};

 export default SubmitButton;
--- a/frontend-web/src/pages/Data/DataSet/index.tsx
+++ b/frontend-web/src/pages/Data/DataSet/index.tsx
@@ -1,13 +1,110 @@
-import React, { useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { Stack, TextField } from '@mui/material';
 import PageContainer from '@/components/PageContainer';
 import PageTitleBox from '@/components/PageTitleBox';
 import SubmitButton from '@/components/button/SubmitButton';
 import ConfirmCancelButton from '@/components/button/ConfirmCancelButton';
-// import AceEditor from 'react-ace/types';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/snippets/mysql';
+import 'ace-builds/src-min-noconflict/ext-language_tools';
+import { get, post } from '@/helpers/apiHelper';
+import DataGrid from '@/components/DataGrid';
+import { OptColumn } from 'tui-grid/types/options';

-function DataSet(props) {
+const DataSet = props => {
  const [isConnected, setIsConnected] = useState(false);
+  const [editorValue, setEditorValue] = useState<string>('');
+  const [data, setData] = useState([]);
+  const [columns, setColumns] = useState([]);
+
+  const testColumns = [
+    { name: 'accountName', header: '쇼핑몰', align: 'center', width: 200, sortable: true },
+    { name: 'productId', header: '상품ID', align: 'center', width: 150, className: 'numberCell', sortable: true },
+    { name: 'productName', header: '상품명', align: 'left', minWidth: 300, sortable: true },
+    { name: 'productGroupName', header: '상품그룹명', align: 'left', width: 200, sortable: true },
+    { name: 'saleStatusName', header: '판매상태', align: 'center', width: 120, sortable: true },
+    {
+      name: 'price',
+      header: '판매가',
+      align: 'right',
+      width: 120,
+      className: 'numberCell',
+      sortable: true,
+    },
+    {
+      name: 'pcSalePrice',
+      header: 'PC 할인가',
+      align: 'right',
+      width: 120,
+      className: 'numberCell',
+      sortable: true,
+    },
+    {
+      name: 'mobileSalePrice',
+      header: '모바일 할인가',
+      align: 'right',
+      width: 120,
+      className: 'numberCell',
+      sortable: true,
+    },
+    {
+      name: 'deliveryPrice',
+      header: '배송비',
+      align: 'right',
+      width: 120,
+      className: 'numberCell',
+      sortable: true,
+    },
+    {
+      name: 'productRegDate',
+      header: '상품 등록일',
+      align: 'center',
+      width: 110,
+      className: 'numberCell',
+      sortable: true,
+    },
+    {
+      name: 'productModDate',
+      header: '상품 수정',
+      align: 'center',
+      width: 110,
+      className: 'numberCell',
+      sortable: true,
+    },
+  ];
+
+  useLayoutEffect(() => {
+    getData();
+  }, []);
+
+  useEffect(() => {
+    if (data.length > 0) {
+      // setColumns(createColumns());
+    }
+  }, [data]);
+
+  const getData = () => {
+    console.log(editorValue);
+    get('/data/sample/chart.json').then(response => {
+      setData(response.data);
+      setColumns(createColumns(response.data));
+    });
+  };
+
+  const createColumns = data => {
+    let target = null;
+    if (data instanceof Array && data.length > 0) {
+      target = data[0];
+    } else if (data instanceof Object) {
+      target = data;
+    }
+    const columns = Object.keys(target).map(key => {
+      return { name: key, header: key, align: key, width: 200, sortable: true };
+    });
+    return columns;
+  };

  const handleSubmit = data => {
    data.preventDefault();
@@ -19,6 +116,15 @@ function DataSet(props) {
    setIsConnected(true);
  };

+  const onLoad = e => {
+    console.log(e);
+  };
+
+  const onChange = newValue => {
+    console.log('change', newValue);
+    setEditorValue(newValue);
+  };
+
  return (
    <PageContainer>
      <PageTitleBox title="데이터셋 생성" button={<ConfirmCancelButton confirmProps={{ disabled: !isConnected }} />}>
@@ -28,39 +134,43 @@ function DataSet(props) {
            label="데이터셋 이름"
            placeholder="데이터셋의 이름을 입력해 주세요"
            autoFocus
-            required
            // helperText="데이터셋의 이름을 입력해 주세요"
          />
-          {/*<AceEditor*/}
-          {/*  // style={styles}*/}
-          {/*  // className="problem-code-input"*/}
-          {/*  // placeholder=''*/}
-          {/*  mode="c_cpp"*/}
-          {/*  theme="tomorrow"*/}
-          {/*  name="codeInput"*/}
-          {/*  // onLoad={onLoad}*/}
-          {/*  onChange={this.onChange}*/}
-          {/*  fontSize={18}*/}
-          {/*  showPrintMargin*/}
-          {/*  showGutter*/}
-          {/*  highlightActiveLine*/}
-          {/*  value=""*/}
-          {/*  // setOptions=*/}
-          {/*/>*/}
-          <TextField
-            id="userSetContent"
-            label="데이터셋 입력"
-            placeholder="데이터셋의 내용을 입력해 주세요"
-            multiline
-            minRows={10}
-            required
-            // helperText="데이터셋의 내용을 입력해 주세요"
+          <AceEditor
+            placeholder="Please enter a query."
+            style={{ width: '100%', height: '200px' }}
+            mode="mysql"
+            theme="tomorrow"
+            name="codeInput"
+            onLoad={onLoad}
+            onChange={onChange}
+            fontSize={14}
+            showPrintMargin={true}
+            showGutter={true}
+            highlightActiveLine={true}
+            value={editorValue}
+            setOptions={{
+              enableBasicAutocompletion: true,
+              enableLiveAutocompletion: true,
+              enableSnippets: true,
+              showLineNumbers: true,
+              tabSize: 2,
+            }}
+          />
+          <SubmitButton label="Run" type="button" onClick={getData} />
+          <DataGrid
+            minBodyHeight={300}
+            bodyHeight={500}
+            data={data}
+            columns={columns}
+            columnOptions={{
+              resizable: true,
+            }}
          />
-          <SubmitButton label="Test Connect" type="submit" />
        </Stack>
      </PageTitleBox>
    </PageContainer>
  );
-}
+};

 export default DataSet;