1

src/shared/components/DataTable.test.ts

@@ -6,8 +6,8 @@ import LayoutPreferenceList from './LayoutPreferenceList.vue'
 import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
 
 const TableStub = defineComponent({
-  props: { border: Boolean, stripe: Boolean },
-  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)"><slot /></div>',
+  props: { border: Boolean, stripe: Boolean, maxHeight: [String, Number] },
+  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)" :data-max-height="String(maxHeight)"><slot /></div>',
   methods: { doLayout() {} },
 })
 const ColumnStub = defineComponent({
@@ -93,6 +93,20 @@ describe('DataTable column preferences', () => {
     expect(plainTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'false', 'data-stripe': 'false' })
   })
 
+  it('keeps table bodies within the viewport by default and allows a custom height', () => {
+    const defaultTable = mountTable()
+    expect(defaultTable.get('.table-stub').attributes('data-max-height')).toBe('calc(100vh - 300px)')
+
+    const customTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, maxHeight: 420 },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(customTable.get('.table-stub').attributes('data-max-height')).toBe('420')
+  })
+
   it('uses key as the data property for ordinary columns only', () => {
     const wrapper = shallowMount(DataTable, {
       props: {