⚗️ Add delete results logic

apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx

@@ -4,11 +4,13 @@ import { Box, Checkbox, Flex } from '@chakra-ui/react'
 import { Answer, Result } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext'
 import React, { useEffect } from 'react'
-import { Hooks, useRowSelect, useTable } from 'react-table'
+import { Hooks, useFlexLayout, useRowSelect, useTable } from 'react-table'
 import { parseSubmissionsColumns } from 'services/publicTypebot'
 import { parseDateToReadable } from 'services/results'
 import { LoadingRows } from './LoadingRows'
 
+const defaultCellWidth = 180
+
 type SubmissionsTableProps = {
   results?: (Result & { answers: Answer[] })[]
   onNewSelection: (selection: string[]) => void
@@ -42,10 +44,16 @@ export const SubmissionsTable = ({
     prepareRow,
     getTableBodyProps,
     selectedFlatRows,
-  } = useTable({ columns, data }, useRowSelect, checkboxColumnHook) as any
+  } = useTable(
+    { columns, data, defaultColumn: { width: defaultCellWidth } },
+    useRowSelect,
+    checkboxColumnHook,
+    useFlexLayout
+  ) as any
 
   useEffect(() => {
-    onNewSelection(selectedFlatRows.map((row: any) => row.id))
+    if (!results) return
+    onNewSelection(selectedFlatRows.map((row: any) => results[row.index].id))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFlatRows])
 
@@ -67,9 +75,10 @@ export const SubmissionsTable = ({
                       color="gray.500"
                       fontWeight="normal"
                       textAlign="left"
-                      minW={idx > 0 ? '200px' : 'unset'}
-                      flex={idx > 0 ? '1' : '0'}
                       {...column.getHeaderProps()}
+                      style={{
+                        width: idx === 0 ? '50px' : `${defaultCellWidth}px`,
+                      }}
                     >
                       {column.render('Header')}
                     </Flex>
@@ -96,9 +105,10 @@ export const SubmissionsTable = ({
                       border="1px"
                       as="td"
                       borderColor="gray.200"
-                      minW={idx > 0 ? '200px' : 'unset'}
                       {...cell.getCellProps()}
-                      flex={idx > 0 ? '1' : '0'}
+                      style={{
+                        width: idx === 0 ? '50px' : `${defaultCellWidth}px`,
+                      }}
                     >
                       {cell.render('Cell')}
                     </Flex>