@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/__tests__/components/DataFrame.test.ts

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import DataFrame from '../../components/DataFrame.vue'
 import { useSettingsStore } from '../../stores/settings'
-import type { DataFrameColumn, SortState, PaginationState } from '../../types'
+import type { DataFrameColumn, SortState } from '../../types'
 
 describe('DataFrame', () => {
   const mockData = [
@@ -21,7 +21,7 @@ describe('DataFrame', () => {
   describe('rendering with default props', () => {
     it('should render table container', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
       expect(wrapper.find('.mint-dataframe__table').exists()).toBe(true)
@@ -29,7 +29,7 @@ describe('DataFrame', () => {
 
     it('should render column headers', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const headers = wrapper.findAll('.mint-dataframe__th')
       expect(headers).toHaveLength(3)
@@ -40,7 +40,7 @@ describe('DataFrame', () => {
 
     it('should render data rows', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const rows = wrapper.findAll('.mint-dataframe__row')
       expect(rows).toHaveLength(3)
@@ -48,7 +48,7 @@ describe('DataFrame', () => {
 
     it('should render cell values', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
       const cells = firstRow.findAll('.mint-dataframe__td')
@@ -59,14 +59,14 @@ describe('DataFrame', () => {
 
     it('should apply bordered class by default', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe--bordered').exists()).toBe(true)
     })
 
     it('should apply striped rows by default', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const rows = wrapper.findAll('.mint-dataframe__row')
       expect(rows[1].classes()).toContain('mint-dataframe__row--striped')
@@ -76,7 +76,7 @@ describe('DataFrame', () => {
   describe('column configuration', () => {
     it('should apply column alignment', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const ageHeader = wrapper.findAll('.mint-dataframe__th')[1]
       expect(ageHeader.classes()).toContain('mint-dataframe__th--align-right')
@@ -87,7 +87,7 @@ describe('DataFrame', () => {
         { key: 'name', label: 'Name', width: 200 },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
+        props: { spec: { columns }, data: mockData },
       })
       const header = wrapper.find('.mint-dataframe__th')
       expect(header.attributes('style')).toContain('width: 200px')
@@ -98,7 +98,7 @@ describe('DataFrame', () => {
         { key: 'name', label: 'Name', width: '20rem' },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
+        props: { spec: { columns }, data: mockData },
       })
       const header = wrapper.find('.mint-dataframe__th')
       expect(header.attributes('style')).toContain('width: 20rem')
@@ -109,7 +109,7 @@ describe('DataFrame', () => {
         { key: 'name', label: 'Name', minWidth: 150 },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
+        props: { spec: { columns }, data: mockData },
       })
       const header = wrapper.find('.mint-dataframe__th')
       expect(header.attributes('style')).toContain('min-width: 150px')
@@ -120,7 +120,7 @@ describe('DataFrame', () => {
         { key: 'name', label: 'Name', ellipsis: true },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
+        props: { spec: { columns }, data: mockData },
       })
       const cell = wrapper.find('.mint-dataframe__td')
       expect(cell.classes()).toContain('mint-dataframe__td--ellipsis')
@@ -135,7 +135,7 @@ describe('DataFrame', () => {
         },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
+        props: { spec: { columns }, data: mockData },
       })
       const ageCell = wrapper.findAll('.mint-dataframe__row')[0].findAll('.mint-dataframe__td')[0]
       expect(ageCell.text()).toBe('30 years old')
@@ -150,7 +150,7 @@ describe('DataFrame', () => {
 
     it('should show sort icon on sortable columns', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
+        props: { spec: { columns: sortableColumns }, data: mockData },
       })
       const sortIcons = wrapper.findAll('.mint-dataframe__sort-icon')
       expect(sortIcons).toHaveLength(2)
@@ -158,7 +158,7 @@ describe('DataFrame', () => {
 
     it('should apply sortable class to sortable headers', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
+        props: { spec: { columns: sortableColumns }, data: mockData },
       })
       const headers = wrapper.findAll('.mint-dataframe__th')
       expect(headers[0].classes()).toContain('mint-dataframe__th--sortable')
@@ -166,7 +166,7 @@ describe('DataFrame', () => {
 
     it('should sort ascending on first click', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
+        props: { spec: { columns: sortableColumns }, data: mockData },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
       await nameHeader.get('.mint-dataframe__th-button').trigger('click')
@@ -180,8 +180,8 @@ describe('DataFrame', () => {
     it('should sort descending on second click', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: sortableColumns },
           data: mockData,
-          columns: sortableColumns,
           sort: { key: 'name', direction: 'asc' },
         },
       })
@@ -195,8 +195,8 @@ describe('DataFrame', () => {
     it('should clear sort on third click', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: sortableColumns },
           data: mockData,
-          columns: sortableColumns,
           sort: { key: 'name', direction: 'desc' },
         },
       })
@@ -209,7 +209,7 @@ describe('DataFrame', () => {
 
     it('should sort data internally when sort prop is not provided', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
+        props: { spec: { columns: sortableColumns }, data: mockData },
       })
       const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
       await nameHeader.get('.mint-dataframe__th-button').trigger('click')
@@ -222,7 +222,7 @@ describe('DataFrame', () => {
 
     it('should sort numeric columns correctly', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
+        props: { spec: { columns: sortableColumns }, data: mockData },
       })
       const ageHeader = wrapper.findAll('.mint-dataframe__th')[1]
       await ageHeader.get('.mint-dataframe__th-button').trigger('click')
@@ -236,8 +236,8 @@ describe('DataFrame', () => {
     it('should apply sorted class to active column', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: sortableColumns },
           data: mockData,
-          columns: sortableColumns,
           sort: { key: 'name', direction: 'asc' },
         },
       })
@@ -251,7 +251,7 @@ describe('DataFrame', () => {
         { key: 'age', label: 'Age' },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns, sortable: true },
+        props: { spec: { columns, sortable: true }, data: mockData },
       })
       const sortableHeaders = wrapper.findAll('.mint-dataframe__th--sortable')
       expect(sortableHeaders).toHaveLength(2)
@@ -261,14 +261,14 @@ describe('DataFrame', () => {
   describe('search filtering', () => {
     it('should show search input when searchable is true', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
+        props: { spec: { columns: mockColumns, searchable: true }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__search').exists()).toBe(true)
     })
 
     it('should filter data based on search query', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
+        props: { spec: { columns: mockColumns, searchable: true }, data: mockData },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
       await searchInput.setValue('Alice')
@@ -280,7 +280,7 @@ describe('DataFrame', () => {
 
     it('should search across all columns by default', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
+        props: { spec: { columns: mockColumns, searchable: true }, data: mockData },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
       await searchInput.setValue('bob@example.com')
@@ -293,10 +293,8 @@ describe('DataFrame', () => {
     it('should search only specified columns', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, searchable: true, searchKeys: ['name'] },
           data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          searchKeys: ['name'],
         },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
@@ -309,7 +307,7 @@ describe('DataFrame', () => {
 
     it('should treat whitespace-only search as empty', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
+        props: { spec: { columns: mockColumns, searchable: true }, data: mockData },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
       await searchInput.setValue('   ')
@@ -320,7 +318,7 @@ describe('DataFrame', () => {
 
     it('should be case-insensitive', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
+        props: { spec: { columns: mockColumns, searchable: true }, data: mockData },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
       await searchInput.setValue('ALICE')
@@ -332,10 +330,8 @@ describe('DataFrame', () => {
     it('should use custom placeholder', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, searchable: true, searchPlaceholder: 'Type to search...' },
           data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          searchPlaceholder: 'Type to search...',
         },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
@@ -344,15 +340,11 @@ describe('DataFrame', () => {
   })
 
   describe('pagination', () => {
-    const paginationState: PaginationState = {
-      page: 1,
-      pageSize: 2,
-      total: 3,
-    }
+    const paginationState = { pageSize: 2 }
 
     it('should show pagination controls', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__footer').exists()).toBe(true)
       expect(wrapper.find('.mint-dataframe__page-controls').exists()).toBe(true)
@@ -360,7 +352,7 @@ describe('DataFrame', () => {
 
     it('should display page info', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
       })
       const pageInfo = wrapper.find('.mint-dataframe__page-info')
       expect(pageInfo.text()).toContain('1')
@@ -369,36 +361,53 @@ describe('DataFrame', () => {
 
     it('should paginate data', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
       })
       const rows = wrapper.findAll('.mint-dataframe__row')
       expect(rows).toHaveLength(2) // pageSize is 2
     })
 
-    it('should emit pagination event on page change', async () => {
+    it('should emit update:page on page change', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
       })
       const nextButton = wrapper.findAll('.mint-dataframe__page-btn')[1]
       await nextButton.trigger('click')
 
-      expect(wrapper.emitted('update:pagination')).toHaveLength(1)
-      const newPagination = wrapper.emitted('update:pagination')?.[0]?.[0] as PaginationState
-      expect(newPagination.page).toBe(2)
+      expect(wrapper.emitted('update:page')).toEqual([[2]])
+    })
+
+    it('should move to the next page when page is not bound', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
+      })
+      await wrapper.findAll('.mint-dataframe__page-btn')[1].trigger('click')
+
+      expect(wrapper.findAll('.mint-dataframe__row')).toHaveLength(1)
+    })
+
+    it('should show the last page that has rows when a search leaves fewer pages', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { spec: { columns: mockColumns, pagination: paginationState, searchable: true }, data: mockData },
+      })
+      await wrapper.findAll('.mint-dataframe__page-btn')[1].trigger('click')
+
+      await wrapper.find('.mint-dataframe__search').setValue('Alice')
+
+      expect(wrapper.findAll('.mint-dataframe__row')).toHaveLength(1)
     })
 
     it('should disable prev button on first page', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData },
       })
       const prevButton = wrapper.findAll('.mint-dataframe__page-btn')[0]
       expect(prevButton.attributes('disabled')).toBeDefined()
     })
 
     it('should disable next button on last page', () => {
-      const lastPageState: PaginationState = { page: 2, pageSize: 2, total: 3 }
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: lastPageState },
+        props: { spec: { columns: mockColumns, pagination: paginationState }, data: mockData, page: 2 },
       })
       const nextButton = wrapper.findAll('.mint-dataframe__page-btn')[1]
       expect(nextButton.attributes('disabled')).toBeDefined()
@@ -406,7 +415,7 @@ describe('DataFrame', () => {
 
     it('should not show pagination when false', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: false },
+        props: { spec: { columns: mockColumns, pagination: false }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__footer').exists()).toBe(false)
     })
@@ -415,68 +424,64 @@ describe('DataFrame', () => {
   describe('row selection', () => {
     it('should show checkbox column when selectable', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true },
+        props: { spec: { columns: mockColumns, selectable: true }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__th--checkbox').exists()).toBe(true)
     })
 
     it('should show checkboxes for each row', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true },
+        props: { spec: { columns: mockColumns, selectable: true }, data: mockData },
       })
       const checkboxes = wrapper.findAll('.mint-dataframe__checkbox')
       // One for header + one for each row
       expect(checkboxes.length).toBeGreaterThan(mockData.length)
     })
 
-    it('should emit selectedKeys on row selection', async () => {
+    it('should emit selected on row selection', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
+        props: { spec: { columns: mockColumns, selectable: true, rowKey: 'id' }, data: mockData },
       })
       const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
       await rowCheckboxes[0].trigger('change')
 
-      expect(wrapper.emitted('update:selectedKeys')).toHaveLength(1)
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
+      expect(wrapper.emitted('update:selected')).toHaveLength(1)
+      const keys = wrapper.emitted('update:selected')?.[0]?.[0] as number[]
       expect(keys).toContain(1)
     })
 
     it('should toggle selection on row checkbox click', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, selectable: true, rowKey: 'id' },
           data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-          selectedKeys: [1],
+          selected: [1],
         },
       })
       const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
       await rowCheckboxes[0].trigger('change')
 
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
+      const keys = wrapper.emitted('update:selected')?.[0]?.[0] as number[]
       expect(keys).not.toContain(1)
     })
 
     it('should select all rows with header checkbox', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
+        props: { spec: { columns: mockColumns, selectable: true, rowKey: 'id' }, data: mockData },
       })
       const headerCheckbox = wrapper.find('.mint-dataframe__th--checkbox .mint-dataframe__checkbox input')
       await headerCheckbox.trigger('change')
 
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
+      const keys = wrapper.emitted('update:selected')?.[0]?.[0] as number[]
       expect(keys).toHaveLength(3)
     })
 
     it('should apply selected class to selected rows', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, selectable: true, rowKey: 'id' },
           data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-          selectedKeys: [1],
+          selected: [1],
         },
       })
       const selectedRow = wrapper.find('.mint-dataframe__row--selected')
@@ -485,14 +490,14 @@ describe('DataFrame', () => {
 
     it('should render row checkboxes as BaseCheckbox sm when selectable', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
+        props: { spec: { columns: mockColumns, selectable: true, rowKey: 'id' }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__td--checkbox .mint-checkbox__box--sm').exists()).toBe(true)
     })
 
     it('should mark the header checkbox mixed when some rows are selected', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id', selectedKeys: [1] },
+        props: { spec: { columns: mockColumns, selectable: true, rowKey: 'id' }, data: mockData, selected: [1] },
       })
       const header = wrapper.find('.mint-dataframe__th--checkbox input')
       expect(header.attributes('aria-checked')).toBe('mixed')
@@ -500,10 +505,10 @@ describe('DataFrame', () => {
 
     it('should select all rows when the mixed header checkbox is clicked', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id', selectedKeys: [1] },
+        props: { spec: { columns: mockColumns, selectable: true, rowKey: 'id' }, data: mockData, selected: [1] },
       })
       await wrapper.find('.mint-dataframe__th--checkbox input').setValue(true)
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
+      const keys = wrapper.emitted('update:selected')?.[0]?.[0] as number[]
       expect(keys).toHaveLength(3)
     })
   })
@@ -511,7 +516,7 @@ describe('DataFrame', () => {
   describe('events', () => {
     it('should emit row-click event', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
       await firstRow.trigger('click')
@@ -524,7 +529,7 @@ describe('DataFrame', () => {
 
     it('should emit cell-click event', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const firstCell = wrapper.find('.mint-dataframe__td')
       await firstCell.trigger('click')
@@ -538,7 +543,7 @@ describe('DataFrame', () => {
 
     it('should emit row-click from cell clicks when clickableRows is true', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, clickableRows: true },
+        props: { spec: { columns: mockColumns, clickableRows: true }, data: mockData },
       })
       const firstCell = wrapper.find('.mint-dataframe__td')
       await firstCell.trigger('click')
@@ -552,7 +557,7 @@ describe('DataFrame', () => {
 
     it('should make clickable rows keyboard accessible', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, clickableRows: true },
+        props: { spec: { columns: mockColumns, clickableRows: true }, data: mockData },
       })
       const firstRow = wrapper.find('.mint-dataframe__row')
       expect(firstRow.attributes('tabindex')).toBe('0')
@@ -566,7 +571,7 @@ describe('DataFrame', () => {
 
     it('should keep non-clickable rows out of the tab order', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       const firstRow = wrapper.find('.mint-dataframe__row')
       expect(firstRow.attributes('tabindex')).toBeUndefined()
@@ -577,7 +582,7 @@ describe('DataFrame', () => {
   describe('empty state', () => {
     it('should show empty state when no data', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: [] },
       })
       expect(wrapper.find('.mint-dataframe__state').exists()).toBe(true)
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(true)
@@ -585,28 +590,28 @@ describe('DataFrame', () => {
 
     it('should display empty text', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: [] },
       })
       expect(wrapper.find('.mint-empty-state__title').text()).toBe('No data')
     })
 
     it('should use custom empty text', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, emptyText: 'No records found' },
+        props: { spec: { columns: mockColumns }, data: [], emptyText: 'No records found' },
       })
       expect(wrapper.find('.mint-empty-state__title').text()).toBe('No records found')
     })
 
     it('should not show empty state when loading', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, loading: true },
+        props: { spec: { columns: mockColumns }, data: [], loading: true },
       })
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
     })
 
     it('should render the empty slot instead of the default placeholder', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: [] },
         slots: { empty: '<p class="custom-empty">Nothing here</p>' },
       })
       expect(wrapper.find('.custom-empty').exists()).toBe(true)
@@ -617,14 +622,14 @@ describe('DataFrame', () => {
   describe('loading state', () => {
     it('should show loading overlay', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
+        props: { spec: { columns: mockColumns }, data: mockData, loading: true },
       })
       expect(wrapper.find('.mint-dataframe__loading').exists()).toBe(true)
     })
 
     it('should show loading spinner', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
+        props: { spec: { columns: mockColumns }, data: mockData, loading: true },
       })
       expect(wrapper.find('.mint-spinner').exists()).toBe(true)
     })
@@ -633,14 +638,14 @@ describe('DataFrame', () => {
   describe('error state', () => {
     it('should render nothing extra when error is not passed', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('[data-state="error"]').exists()).toBe(false)
     })
 
     it('should replace the empty state with an error state', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, error: 'Request failed' },
+        props: { spec: { columns: mockColumns }, data: [], error: 'Request failed' },
       })
       expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
       expect(wrapper.find('[data-state="empty"]').exists()).toBe(false)
@@ -649,14 +654,14 @@ describe('DataFrame', () => {
 
     it('should take precedence over the empty state even with rows present', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, error: 'Boom' },
+        props: { spec: { columns: mockColumns }, data: mockData, error: 'Boom' },
       })
       expect(wrapper.find('[data-state="error"]').exists()).toBe(true)
     })
 
     it('should render the error slot with the message', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, error: 'Boom' },
+        props: { spec: { columns: mockColumns }, data: [], error: 'Boom' },
         slots: { error: '<p class="custom-error">custom error</p>' },
       })
       expect(wrapper.find('.custom-error').exists()).toBe(true)
@@ -666,21 +671,21 @@ describe('DataFrame', () => {
   describe('styling props', () => {
     it('should not apply striped when striped is false', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, striped: false },
+        props: { spec: { columns: mockColumns, striped: false }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__row--striped').exists()).toBe(false)
     })
 
     it('should not apply bordered when bordered is false', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, bordered: false },
+        props: { spec: { columns: mockColumns, bordered: false }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe--bordered').exists()).toBe(false)
     })
 
     it('should apply size class to cells', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, size: 'sm' },
+        props: { spec: { columns: mockColumns, size: 'sm' }, data: mockData },
       })
       const cell = wrapper.find('.mint-dataframe__td')
       expect(cell.classes()).toContain('mint-dataframe__td--sm')
@@ -688,14 +693,14 @@ describe('DataFrame', () => {
 
     it('should apply sticky header class', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, stickyHeader: true },
+        props: { spec: { columns: mockColumns, stickyHeader: true }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__thead--sticky').exists()).toBe(true)
     })
 
     it('should apply maxHeight style', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, maxHeight: 400 },
+        props: { spec: { columns: mockColumns, maxHeight: 400 }, data: mockData },
       })
       const tableWrapper = wrapper.find('.mint-dataframe__table-wrapper')
       expect(tableWrapper.attributes('style')).toContain('max-height: 400px')
@@ -703,7 +708,7 @@ describe('DataFrame', () => {
 
     it('should support string maxHeight', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, maxHeight: '50vh' },
+        props: { spec: { columns: mockColumns, maxHeight: '50vh' }, data: mockData },
       })
       const tableWrapper = wrapper.find('.mint-dataframe__table-wrapper')
       expect(tableWrapper.attributes('style')).toContain('max-height: 50vh')
@@ -720,7 +725,7 @@ describe('DataFrame', () => {
         { key: 'user.email', label: 'Email' },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: nestedData, columns: nestedColumns },
+        props: { spec: { columns: nestedColumns }, data: nestedData },
       })
       const cells = wrapper.findAll('.mint-dataframe__td')
       expect(cells[0].text()).toBe('Alice')
@@ -732,10 +737,8 @@ describe('DataFrame', () => {
     it('should use string rowKey', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, selectable: true, rowKey: 'id' },
           data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
         },
       })
       expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
@@ -744,10 +747,8 @@ describe('DataFrame', () => {
     it('should use function rowKey', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, selectable: true, rowKey: (row) => `row-${row.id}` },
           data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: (row) => `row-${row.id}`,
         },
       })
       expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
@@ -757,7 +758,7 @@ describe('DataFrame', () => {
   describe('slots', () => {
     it('should support header slot', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
         slots: {
           'header-name': '<div class="custom-header">Custom Name</div>',
         },
@@ -768,7 +769,7 @@ describe('DataFrame', () => {
 
     it('should support cell slot', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
         slots: {
           'cell-name': '<div class="custom-cell">{{ value }}</div>',
         },
@@ -778,7 +779,7 @@ describe('DataFrame', () => {
 
     it('should support empty slot', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: [] },
         slots: {
           empty: '<div class="custom-empty">Nothing here</div>',
         },
@@ -789,7 +790,7 @@ describe('DataFrame', () => {
 
     it('should support loading slot', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
+        props: { spec: { columns: mockColumns }, data: mockData, loading: true },
         slots: {
           loading: '<div class="custom-loading">Loading...</div>',
         },
@@ -800,9 +801,8 @@ describe('DataFrame', () => {
     it('should support footer slot', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, pagination: { pageSize: 2 } },
           data: mockData,
-          columns: mockColumns,
-          pagination: { page: 1, pageSize: 2, total: 3 },
         },
         slots: {
           footer: '<div class="custom-footer">Custom Footer</div>',
@@ -818,16 +818,23 @@ describe('DataFrame', () => {
         { id: 1, name: null, age: undefined, email: 'test@example.com' },
       ]
       const wrapper = mount(DataFrame, {
-        props: { data: dataWithNulls, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: dataWithNulls },
       })
       const cells = wrapper.findAll('.mint-dataframe__td')
       expect(cells[0].text()).toBe('')
       expect(cells[1].text()).toBe('')
     })
 
+    it('should derive one column per key of the first row when the spec has no columns', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData },
+      })
+      expect(wrapper.findAll('.mint-dataframe__th').map(th => th.text())).toEqual(['id', 'name', 'age', 'email'])
+    })
+
     it('should handle empty columns array', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: [] },
+        props: { spec: { columns: [] }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__table').exists()).toBe(true)
     })
@@ -840,9 +847,8 @@ describe('DataFrame', () => {
       }))
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, pagination: { pageSize: 10 } },
           data: largeData,
-          columns: mockColumns,
-          pagination: { page: 1, pageSize: 10, total: 1000 },
         },
       })
       const rows = wrapper.findAll('.mint-dataframe__row')
@@ -852,10 +858,8 @@ describe('DataFrame', () => {
     it('should handle search with filtered pagination', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, searchable: true, pagination: { pageSize: 2 } },
           data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          pagination: { page: 1, pageSize: 2, total: 3 },
         },
       })
       const searchInput = wrapper.find('.mint-dataframe__search')
@@ -868,10 +872,8 @@ describe('DataFrame', () => {
     it('should stop propagation on checkbox clicks', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, selectable: true, rowKey: 'id' },
           data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
         },
       })
       const checkbox = wrapper.find('.mint-dataframe__td--checkbox .mint-dataframe__checkbox input')
@@ -885,14 +887,14 @@ describe('DataFrame', () => {
   describe('row deletion', () => {
     it('should not show an actions column by default', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__td--actions').exists()).toBe(false)
     })
 
     it('should show a delete button per row when deletable', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
+        props: { spec: { columns: mockColumns, deletable: true }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__th--actions').exists()).toBe(true)
       expect(wrapper.findAll('.mint-dataframe__delete-btn')).toHaveLength(mockData.length)
@@ -900,7 +902,7 @@ describe('DataFrame', () => {
 
     it('should emit delete-row with the row and index', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
+        props: { spec: { columns: mockColumns, deletable: true }, data: mockData },
       })
       await wrapper.findAll('.mint-dataframe__delete-btn')[1].trigger('click')
 
@@ -912,7 +914,7 @@ describe('DataFrame', () => {
 
     it('should not emit row-click when the delete button is clicked', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
+        props: { spec: { columns: mockColumns, deletable: true }, data: mockData },
       })
       await wrapper.find('.mint-dataframe__delete-btn').trigger('click')
       expect(wrapper.emitted('row-click')).toBeUndefined()
@@ -920,7 +922,7 @@ describe('DataFrame', () => {
 
     it('should use a custom delete label', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true, deleteLabel: 'Remove' },
+        props: { spec: { columns: mockColumns, deletable: true, deleteLabel: 'Remove' }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__delete-btn').attributes('aria-label')).toBe('Remove')
     })
@@ -929,21 +931,21 @@ describe('DataFrame', () => {
   describe('column resizing', () => {
     it('should not show resize handles by default', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__resize-handle').exists()).toBe(false)
     })
 
     it('should show a resize handle per column when resizable', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, resizable: true },
+        props: { spec: { columns: mockColumns, resizable: true }, data: mockData },
       })
       expect(wrapper.findAll('.mint-dataframe__resize-handle')).toHaveLength(mockColumns.length)
     })
 
     it('should emit update:columnWidths while dragging a handle', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, resizable: true },
+        props: { spec: { columns: mockColumns, resizable: true }, data: mockData },
       })
       const handle = wrapper.findAll('.mint-dataframe__resize-handle')[0]
       await handle.trigger('mousedown', { clientX: 100 })
@@ -959,9 +961,8 @@ describe('DataFrame', () => {
     it('should honor controlled columnWidths', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: mockColumns, resizable: true },
           data: mockData,
-          columns: mockColumns,
-          resizable: true,
           columnWidths: { name: 321 },
         },
       })
@@ -972,9 +973,8 @@ describe('DataFrame', () => {
     it('should not trigger sort when the resize handle is clicked', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [{ key: 'name', label: 'Name', sortable: true }], resizable: true },
           data: mockData,
-          columns: [{ key: 'name', label: 'Name', sortable: true }],
-          resizable: true,
         },
       })
       await wrapper.find('.mint-dataframe__resize-handle').trigger('click')
@@ -984,9 +984,8 @@ describe('DataFrame', () => {
     it('should expose the resize handle as a slider with its current width', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [{ key: 'name', label: 'Name', minWidth: 80 }], resizable: true },
           data: mockData,
-          columns: [{ key: 'name', label: 'Name', minWidth: 80 }],
-          resizable: true,
           columnWidths: { name: 240 },
         },
       })
@@ -1002,9 +1001,8 @@ describe('DataFrame', () => {
     it('should resize a column with the arrow keys, clamped to the minimum width', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [{ key: 'name', label: 'Name' }], resizable: true },
           data: mockData,
-          columns: [{ key: 'name', label: 'Name' }],
-          resizable: true,
           columnWidths: { name: 120 },
         },
       })
@@ -1028,8 +1026,8 @@ describe('DataFrame', () => {
     it('should render sortable headers as buttons and plain headers without one', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [...sortableColumn, { key: 'age', label: 'Age' }] },
           data: mockData,
-          columns: [...sortableColumn, { key: 'age', label: 'Age' }],
         },
       })
 
@@ -1041,8 +1039,8 @@ describe('DataFrame', () => {
     it('should reflect the sort direction with aria-sort', async () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [...sortableColumn, { key: 'age', label: 'Age' }] },
           data: mockData,
-          columns: [...sortableColumn, { key: 'age', label: 'Age' }],
         },
       })
 
@@ -1062,7 +1060,7 @@ describe('DataFrame', () => {
 
     it('should sort from the keyboard with Enter and Space', async () => {
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumn },
+        props: { spec: { columns: sortableColumn }, data: mockData },
       })
 
       const button = wrapper.get('.mint-dataframe__th-button')
@@ -1082,7 +1080,7 @@ describe('DataFrame', () => {
     it('falls back to md when no settings store is installed', () => {
       setActivePinia(undefined)
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__td--md').exists()).toBe(true)
     })
@@ -1092,7 +1090,7 @@ describe('DataFrame', () => {
       useSettingsStore().tableDensity = 'compact'
 
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
+        props: { spec: { columns: mockColumns }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__td--sm').exists()).toBe(true)
       expect(wrapper.find('.mint-dataframe__td--md').exists()).toBe(false)
@@ -1103,7 +1101,7 @@ describe('DataFrame', () => {
       useSettingsStore().tableDensity = 'compact'
 
       const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, size: 'lg' },
+        props: { spec: { columns: mockColumns, size: 'lg' }, data: mockData },
       })
       expect(wrapper.find('.mint-dataframe__td--lg').exists()).toBe(true)
     })
@@ -1116,7 +1114,7 @@ describe('DataFrame', () => {
       { key: 'conc', label: 'Conc', unit: 'µM', type: 'number' },
       { key: 'rt', label: 'RT', unit: 'min', type: 'number', precision: 2 },
     ]
-    const mountMeasures = () => mount(DataFrame, { props: { data: measureData, columns: measureColumns } })
+    const mountMeasures = () => mount(DataFrame, { props: { spec: { columns: measureColumns }, data: measureData } })
 
     it('should render the unit in its own element when a column declares a unit', () => {
       const header = mountMeasures().findAll('.mint-dataframe__th')[1]
@@ -1150,7 +1148,7 @@ describe('DataFrame', () => {
 
     it('should keep an explicit align when the column type is number', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: measureData, columns: [{ key: 'conc', label: 'Conc', type: 'number', align: 'center' }] },
+        props: { spec: { columns: [{ key: 'conc', label: 'Conc', type: 'number', align: 'center' }] }, data: measureData },
       })
       expect(wrapper.find('.mint-dataframe__td').classes()).toContain('mint-dataframe__td--align-center')
     })
@@ -1173,8 +1171,8 @@ describe('DataFrame', () => {
     it('should let the formatter win when a column declares both formatter and precision', () => {
       const wrapper = mount(DataFrame, {
         props: {
+          spec: { columns: [{ key: 'rt', label: 'RT', precision: 2, formatter: (v: unknown) => `~${String(v)}` }] },
           data: measureData,
-          columns: [{ key: 'rt', label: 'RT', precision: 2, formatter: (v: unknown) => `~${String(v)}` }],
         },
       })
       expect(wrapper.find('.mint-dataframe__td').text()).toBe('~2.4')
@@ -1182,7 +1180,7 @@ describe('DataFrame', () => {
 
     it('should leave non-numeric values untouched when a column declares precision', () => {
       const wrapper = mount(DataFrame, {
-        props: { data: [{ rt: 'n/a' }], columns: [{ key: 'rt', label: 'RT', type: 'number', precision: 2 }] },
+        props: { spec: { columns: [{ key: 'rt', label: 'RT', type: 'number', precision: 2 }] }, data: [{ rt: 'n/a' }] },
       })
       expect(wrapper.find('.mint-dataframe__td').text()).toBe('n/a')
     })