add table cell maxwidth as param

client/src/components/grid/Grid.tsx

@@ -105,6 +105,7 @@ const MilvusGrid: FC<MilvusGridType> = props => {
     selected = [],
     setSelected = () => {},
     setRowsPerPage = () => {},
+    tableCellMaxWidth,
   } = props;
 
   const _isSelected = (row: { [x: string]: any }) => {
@@ -212,6 +213,7 @@ const MilvusGrid: FC<MilvusGridType> = props => {
           setPageSize={setRowsPerPage}
           headEditable={headEditable}
           editHeads={editHeads}
+          tableCellMaxWidth={tableCellMaxWidth}
         ></Table>
         {rowCount ? (
           <TablePagination

client/src/components/grid/Table.tsx

@@ -87,7 +87,8 @@ const useStyles = makeStyles(theme => ({
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      maxWidth: '300px',
+      maxWidth: (props: { tableCellMaxWidth: string }) =>
+        props.tableCellMaxWidth ? props.tableCellMaxWidth : '300px',
       fontSize: '14px',
       lineHeight: '20px',
     },
@@ -117,8 +118,9 @@ const EnhancedTable: FC<TableType> = props => {
     setPageSize,
     headEditable = false,
     editHeads = [],
+    tableCellMaxWidth = '',
   } = props;
-  const classes = useStyles();
+  const classes = useStyles({ tableCellMaxWidth });
   const [order, setOrder] = React.useState('asc');
   const [orderBy, setOrderBy] = React.useState<string>('');
   const [tableMouseStatus, setTableMouseStatus] = React.useState<boolean[]>([]);

client/src/components/grid/Types.ts

@@ -78,6 +78,8 @@ export type TableType = {
   setPageSize?: (size: number) => void;
   headEditable?: boolean;
   editHeads: EditableHeads[];
+  // with unit like '20px'
+  tableCellMaxWidth?: string;
 };
 
 export type ColDefinitionsType = {
@@ -127,6 +129,8 @@ export type MilvusGridType = ToolBarType & {
   showHoverStyle?: boolean;
   headEditable?: boolean;
   editHeads?: EditableHeads[];
+  // with unit like '20px'
+  tableCellMaxWidth?: string;
 };
 
 export type ActionBarType = {

client/src/components/insert/Preview.tsx

@@ -81,7 +81,6 @@ const getTableData = (
   isContainFieldNames: number
 ): { [key in string]: any }[] => {
   const csvData = isContainFieldNames ? data.slice(1) : data;
-
   return transferCsvArrayToTableData(csvData);
 };
 
@@ -129,7 +128,24 @@ const InsertPreview: FC<InsertPreviewProps> = ({
         component: (
           <SimpleMenu
             label={head || insertTrans('requiredFieldName')}
-            menuItems={schemaOptions.map(schema => ({
+            // menuItems={schemaOptions.map(schema => ({
+            //   label: schema.label,
+            //   callback: () => handleTableHeadChange(index, schema.label),
+            //   wrapperClass: `${classes.menuItem} ${
+            //     head === schema.label ? classes.menuActive : ''
+            //   }`,
+            // }))}
+            menuItems={[
+              { label: 'type', value: 'type' },
+              {
+                label: 'field1',
+                value: 'field1',
+              },
+              {
+                label: 'field2',
+                value: 'field2',
+              },
+            ].map(schema => ({
               label: schema.label,
               callback: () => handleTableHeadChange(index, schema.label),
               wrapperClass: `${classes.menuItem} ${
@@ -150,7 +166,7 @@ const InsertPreview: FC<InsertPreviewProps> = ({
       classes.menuItem,
       classes.menuActive,
       ArrowIcon,
-      schemaOptions,
+      // schemaOptions,
       insertTrans,
       handleTableHeadChange,
     ]
@@ -191,7 +207,6 @@ const InsertPreview: FC<InsertPreviewProps> = ({
           variant="filled"
           onChange={(e: { target: { value: unknown } }) => {
             const isContainedValue = e.target.value;
-            console.log('isContained value', isContainedValue);
             handleIsContainedChange(isContainedValue as number);
           }}
         />
@@ -216,6 +231,7 @@ const InsertPreview: FC<InsertPreviewProps> = ({
             showHoverStyle={false}
             headEditable={true}
             editHeads={editHeads}
+            tableCellMaxWidth="120px"
           />
         </div>
       )}