floating add new row bellow rows

src/components/Table/HotKeys.tsx

@@ -53,6 +53,7 @@ const Hotkeys = (props: any) => {
     FieldType.simpleText,
     FieldType.PhoneNumber,
     FieldType.singleSelect,
+    FieldType.longText,
     FieldType.url,
   ];
   const numberFields = [FieldType.number, FieldType.rating];

src/components/Table/index.tsx

@@ -227,6 +227,23 @@ function Table(props: Props) {
     ...tableState.rows.map((row: any) => ({ rowHeight, ...row })),
     {},
   ];
+  const RowRenderer = (props: any) => {
+    const { renderBaseRow, ...rest } = props;
+    console.log(rest);
+    if (rows.length === rest.idx + 1) {
+      return (
+        <Button
+          onClick={() => {
+            tableActions.row.add();
+          }}
+        >
+          Add a new row
+        </Button>
+      );
+    } else {
+      return renderBaseRow(rest);
+    }
+  };
 
   return (
     <>
@@ -245,8 +262,10 @@ function Table(props: Props) {
           <DraggableContainer onHeaderDrop={onHeaderDrop}>
             <ReactDataGrid
               headerRowHeight={45}
+              rowRenderer={RowRenderer}
               rowHeight={rowHeight}
               columns={columns}
+              enableCellSelect={true}
               rowGetter={i => rows[i]}
               rowsCount={rows.length}
               onGridRowsUpdated={onGridRowsUpdated}