Display only rows that fit screen to avoid vertical scroll (#364)

client/components/Editors/Table/index.tsx

@@ -9,6 +9,7 @@ import { TypeComputedProps } from '@inovua/reactdatagrid-community/types'
 import { createColumns } from './columns'
 import * as settings from './settings'
 import * as types from '../../../types'
+import debounce from 'lodash/debounce'
 
 export type ITableEditor = TypeComputedProps | null
 export interface TableEditorProps extends Partial<TypeDataGridProps> {
@@ -25,8 +26,35 @@ export default function TableEditor(props: TableEditorProps) {
     () => createColumns(schema, report, history, selection),
     [schema, report, history, selection]
   )
+  const [rowsPerPage, setRowsPerPage] = React.useState(20)
+
+  const [rowHeight] = React.useState(40)
+
+  React.useEffect(() => {
+    const debouncedHandleResize = debounce(function handleResize() {
+      resizeTable()
+    }, 300)
+    window.addEventListener('resize', debouncedHandleResize)
+
+    return () => {
+      window.removeEventListener('resize', debouncedHandleResize)
+    }
+  })
+
+  function resizeTable() {
+    // using a query selector here and not a ref because the tableRef selects the whole
+    // table including the bottom pagination bar, so we would still need to use a querySelector
+    // for selecting the pagination bar to get its height
+    // see: https://github.com/okfn/opendataeditor/pull/364#discussion_r1589574167
+    const tableElement = document.querySelector('.InovuaReactDataGrid__column-layout')
+    const tableHeight = tableElement?.clientHeight as number
+    // - 1 because we dont include header row
+    setRowsPerPage(Math.floor(tableHeight / rowHeight) - 1)
+  }
+
   return (
     <InovuaDatagrid
+      onReady={resizeTable}
       idProperty="_rowNumber"
       dataSource={source}
       columns={columns}
@@ -35,6 +63,9 @@ export default function TableEditor(props: TableEditorProps) {
       renderLoadMask={LoadMask}
       defaultActiveCell={settings.DEFAULT_ACTIVE_CELL}
       style={{ height: '100%', border: 'none' }}
+      limit={rowsPerPage}
+      onLimitChange={setRowsPerPage}
+      rowHeight={rowHeight}
       {...others}
     />
   )