feat: Introduce resizable table component

package.json

@@ -125,6 +125,7 @@
     "@types/hammerjs": "^2.0.45",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.4.1",
+    "@types/react-resizable": "^3.0.8",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@web/dev-server": "^0.4.6",

react/package.json

@@ -44,6 +44,7 @@
     "react-i18next": "^14.1.3",
     "react-markdown": "^9.0.1",
     "react-relay": "^16.2.0",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",

react/src/components/BAITable.tsx

@@ -0,0 +1,132 @@
+import { Table } from 'antd';
+import { createStyles } from 'antd-style';
+import { ColumnsType } from 'antd/es/table';
+import { TableProps } from 'antd/lib';
+import _ from 'lodash';
+import { useMemo, useState } from 'react';
+import { Resizable, ResizeCallbackData } from 'react-resizable';
+
+const useStyles = createStyles(({ token, css }) => ({
+  resizableTable: css`
+    .react-resizable-handle {
+      position: absolute;
+      inset-inline-end: 0px;
+      bottom: 0;
+      z-index: 1;
+      width: 10px;
+      height: 100%;
+      cursor: col-resize;
+    }
+    .ant-table-cell {
+      overflow: hidden;
+    }
+  `,
+}));
+
+const ResizableTitle = (
+  props: React.HTMLAttributes<any> & {
+    onResize: (
+      e: React.SyntheticEvent<Element>,
+      data: ResizeCallbackData,
+    ) => void;
+    width: number;
+  },
+) => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+interface BAITableProps extends Omit<TableProps, 'columns'> {
+  resizable?: boolean;
+  columns: ColumnsType<any>;
+}
+
+const BAITable: React.FC<BAITableProps> = ({
+  resizable = false,
+  columns,
+  ...tableProps
+}) => {
+  const { styles } = useStyles();
+  const [tableColumns, setTableColumns] = useState<ColumnsType<any>>(
+    columns || [],
+  );
+
+  useMemo(() => {
+    if (!resizable) {
+      setTableColumns(columns);
+      return;
+    }
+
+    const resizableColumns = _.map(columns, (col, index) => ({
+      ...col,
+      onHeaderCell: (column: ColumnsType[number]) => {
+        return {
+          width: column.width,
+          onResize: handleResize(index) as React.ReactEventHandler<any>,
+        };
+      },
+    }));
+
+    const handleResize =
+      (index: number) =>
+      (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
+        const newColumns = [...resizableColumns];
+        newColumns[index] = {
+          ...newColumns[index],
+          width: size.width,
+          onHeaderCell: (column: ColumnsType[number]) => {
+            return {
+              width: column.width,
+              onResize: handleResize(index) as React.ReactEventHandler<any>,
+            };
+          },
+        };
+        setTableColumns(newColumns);
+      };
+
+    setTableColumns(resizableColumns);
+  }, [resizable, columns]);
+
+  return (
+    <>
+      <Table
+        className={resizable ? styles.resizableTable : ''}
+        components={
+          resizable
+            ? {
+                header: {
+                  cell: ResizableTitle,
+                },
+              }
+            : undefined
+        }
+        columns={tableColumns}
+        {...tableProps}
+      />
+    </>
+  );
+};
+
+export default BAITable;

react/src/components/KeypairResourcePolicyList.tsx

@@ -110,6 +110,8 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
       key: 'name',
       fixed: 'left',
       sorter: (a, b) => localeCompare(a?.name, b?.name),
+      // to use resiazble table, width should be set e.g.)
+      // width: 200,
     },
     {
       title: t('resourcePolicy.Resources'),