@sabrenski/spire-ui 0.0.1

package/src/components/DataTable/DataTable.test.ts

@@ -0,0 +1,1221 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DataTable from './DataTable.vue'
+
+const defaultColumns = [
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'role', label: 'Role' }
+]
+
+const defaultData = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'Editor' }
+]
+
+describe('DataTable', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__table').exists()).toBe(true)
+    })
+
+    it('renders all column headers', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      const headers = wrapper.findAll('.ui-table__header-cell')
+      expect(headers.length).toBe(3)
+      expect(headers[0].text()).toBe('Name')
+      expect(headers[1].text()).toBe('Email')
+      expect(headers[2].text()).toBe('Role')
+    })
+
+    it('renders all data rows', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows.length).toBe(3)
+    })
+
+    it('renders cell values', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      const cells = wrapper.findAll('.ui-table__cell')
+      expect(cells[0].text()).toBe('John Doe')
+      expect(cells[1].text()).toBe('john@example.com')
+      expect(cells[2].text()).toBe('Admin')
+    })
+
+    it('renders nested property values', () => {
+      const columns = [{ key: 'user.email', label: 'User Email' }]
+      const data = [{ id: 1, user: { email: 'nested@example.com' } }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      expect(wrapper.find('.ui-table__cell').text()).toBe('nested@example.com')
+    })
+
+    it('handles missing nested values gracefully', () => {
+      const columns = [{ key: 'user.email', label: 'User Email' }]
+      const data = [{ id: 1, user: {} }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      expect(wrapper.find('.ui-table__cell').text()).toBe('')
+    })
+  })
+
+  describe('Empty State', () => {
+    it('renders empty state when data is empty', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: [] }
+      })
+      expect(wrapper.find('.ui-table__row--empty').exists()).toBe(true)
+      expect(wrapper.findComponent({ name: 'EmptyState' }).exists()).toBe(true)
+    })
+
+    it('renders default empty message', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: [] }
+      })
+      const emptyState = wrapper.findComponent({ name: 'EmptyState' })
+      expect(emptyState.props('title')).toBe('No data available')
+    })
+
+    it('renders custom empty message', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: [],
+          emptyMessage: 'No users found'
+        }
+      })
+      const emptyState = wrapper.findComponent({ name: 'EmptyState' })
+      expect(emptyState.props('title')).toBe('No users found')
+    })
+
+    it('renders empty slot when provided', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: [] },
+        slots: {
+          empty: '<div class="custom-empty">Custom empty state</div>'
+        }
+      })
+      expect(wrapper.find('.custom-empty').exists()).toBe(true)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('applies loading class when loading', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, loading: true }
+      })
+      expect(wrapper.find('.ui-table--loading').exists()).toBe(true)
+    })
+
+    it('sets aria-busy when loading', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, loading: true }
+      })
+      expect(wrapper.find('.ui-table__table').attributes('aria-busy')).toBe('true')
+    })
+
+    it('renders skeleton rows when loading', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, loading: true }
+      })
+      const skeletonRows = wrapper.findAll('.ui-table__row--skeleton')
+      expect(skeletonRows.length).toBe(5) // default skeletonRows
+    })
+
+    it('renders custom number of skeleton rows', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          loading: true,
+          skeletonRows: 10
+        }
+      })
+      const skeletonRows = wrapper.findAll('.ui-table__row--skeleton')
+      expect(skeletonRows.length).toBe(10)
+    })
+
+    it('renders skeleton bars in each cell', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          loading: true,
+          skeletonRows: 1
+        }
+      })
+      const skeletons = wrapper.findAllComponents({ name: 'Skeleton' })
+      expect(skeletons.length).toBe(3)
+    })
+  })
+
+  describe('Selection', () => {
+    it('renders checkbox column when selectable', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__header-cell--checkbox').exists()).toBe(true)
+      const checkboxCells = wrapper.findAll('.ui-table__cell--checkbox')
+      expect(checkboxCells.length).toBe(3)
+    })
+
+    it('does not render checkbox column when not selectable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--checkbox').exists()).toBe(false)
+    })
+
+    it('emits update:selectedIds when row is selected', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: []
+        }
+      })
+      const checkbox = wrapper.findAllComponents({ name: 'Checkbox' })[1]
+      await checkbox.vm.$emit('update:modelValue', true)
+      expect(wrapper.emitted('update:selectedIds')).toBeTruthy()
+      expect(wrapper.emitted('update:selectedIds')![0]).toEqual([[1]])
+    })
+
+    it('emits update:selectedIds when row is deselected', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: [1, 2]
+        }
+      })
+      const checkbox = wrapper.findAllComponents({ name: 'Checkbox' })[1]
+      await checkbox.vm.$emit('update:modelValue', false)
+      expect(wrapper.emitted('update:selectedIds')![0]).toEqual([[2]])
+    })
+
+    it('applies selected class to selected rows', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: [1]
+        }
+      })
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows[0].classes()).toContain('ui-table__row--selected')
+      expect(rows[1].classes()).not.toContain('ui-table__row--selected')
+    })
+
+    it('select all selects all rows', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: []
+        }
+      })
+      const selectAllCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[0]
+      await selectAllCheckbox.vm.$emit('update:modelValue', true)
+      expect(wrapper.emitted('update:selectedIds')![0]).toEqual([[1, 2, 3]])
+    })
+
+    it('select all deselects all rows', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: [1, 2, 3]
+        }
+      })
+      const selectAllCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[0]
+      await selectAllCheckbox.vm.$emit('update:modelValue', false)
+      expect(wrapper.emitted('update:selectedIds')![0]).toEqual([[]])
+    })
+
+    it('select all checkbox is indeterminate when some selected', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: [1]
+        }
+      })
+      const selectAllCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[0]
+      expect(selectAllCheckbox.props('indeterminate')).toBe(true)
+    })
+
+    it('select all checkbox is checked when all selected', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: [1, 2, 3]
+        }
+      })
+      const selectAllCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[0]
+      expect(selectAllCheckbox.props('modelValue')).toBe(true)
+      expect(selectAllCheckbox.props('indeterminate')).toBe(false)
+    })
+
+    it('uses custom rowKey for selection', async () => {
+      const data = [
+        { uuid: 'a', name: 'John' },
+        { uuid: 'b', name: 'Jane' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: [{ key: 'name', label: 'Name' }],
+          data,
+          selectable: true,
+          selectedIds: [],
+          rowKey: 'uuid'
+        }
+      })
+      const checkbox = wrapper.findAllComponents({ name: 'Checkbox' })[1]
+      await checkbox.vm.$emit('update:modelValue', true)
+      expect(wrapper.emitted('update:selectedIds')![0]).toEqual([['a']])
+    })
+  })
+
+  describe('Sorting', () => {
+    it('renders sortable header when column is sortable', () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--sortable').exists()).toBe(true)
+    })
+
+    it('does not render sortable header when column is not sortable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--sortable').exists()).toBe(false)
+    })
+
+    it('renders sort icon on sortable columns', () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__sort-icon').exists()).toBe(true)
+    })
+
+    it('emits sort-change on header click', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      expect(wrapper.emitted('sort-change')).toBeTruthy()
+      expect(wrapper.emitted('sort-change')![0]).toEqual([{ key: 'name', direction: 'asc' }])
+    })
+
+    it('cycles through sort directions: asc -> desc -> null', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      const header = wrapper.find('.ui-table__header-cell--sortable')
+
+      await header.trigger('click')
+      expect(wrapper.emitted('sort-change')![0]).toEqual([{ key: 'name', direction: 'asc' }])
+
+      await header.trigger('click')
+      expect(wrapper.emitted('sort-change')![1]).toEqual([{ key: 'name', direction: 'desc' }])
+
+      await header.trigger('click')
+      expect(wrapper.emitted('sort-change')![2]).toEqual([{ key: null, direction: null }])
+    })
+
+    it('resets to asc when switching to different sortable column', async () => {
+      const columns = [
+        { key: 'name', label: 'Name', sortable: true },
+        { key: 'email', label: 'Email', sortable: true }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      const headers = wrapper.findAll('.ui-table__header-cell--sortable')
+
+      await headers[0].trigger('click')
+      expect(wrapper.emitted('sort-change')![0]).toEqual([{ key: 'name', direction: 'asc' }])
+
+      await headers[1].trigger('click')
+      expect(wrapper.emitted('sort-change')![1]).toEqual([{ key: 'email', direction: 'asc' }])
+    })
+
+    it('sorts data locally in ascending order', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const data = [
+        { id: 1, name: 'Charlie' },
+        { id: 2, name: 'Alice' },
+        { id: 3, name: 'Bob' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      const cells = wrapper.findAll('.ui-table__cell')
+      expect(cells[0].text()).toBe('Alice')
+      expect(cells[1].text()).toBe('Bob')
+      expect(cells[2].text()).toBe('Charlie')
+    })
+
+    it('sorts data locally in descending order', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const data = [
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Charlie' },
+        { id: 3, name: 'Bob' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      const header = wrapper.find('.ui-table__header-cell--sortable')
+      await header.trigger('click')
+      await header.trigger('click')
+      const cells = wrapper.findAll('.ui-table__cell')
+      expect(cells[0].text()).toBe('Charlie')
+      expect(cells[1].text()).toBe('Bob')
+      expect(cells[2].text()).toBe('Alice')
+    })
+
+    it('sorts numeric values correctly', async () => {
+      const columns = [{ key: 'age', label: 'Age', sortable: true }]
+      const data = [
+        { id: 1, age: 25 },
+        { id: 2, age: 10 },
+        { id: 3, age: 100 }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      const cells = wrapper.findAll('.ui-table__cell')
+      expect(cells[0].text()).toBe('10')
+      expect(cells[1].text()).toBe('25')
+      expect(cells[2].text()).toBe('100')
+    })
+
+    it('handles null values in sorting', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const data = [
+        { id: 1, name: 'Bob' },
+        { id: 2, name: null },
+        { id: 3, name: 'Alice' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      const cells = wrapper.findAll('.ui-table__cell')
+      expect(cells[0].text()).toBe('Alice')
+      expect(cells[1].text()).toBe('Bob')
+      expect(cells[2].text()).toBe('')
+    })
+
+    it('applies sorted class to active sort column', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      expect(wrapper.find('.ui-table__header-cell--sorted').exists()).toBe(true)
+    })
+
+    it('applies asc class to sort icon when ascending', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      expect(wrapper.find('.ui-table__sort-icon--asc').exists()).toBe(true)
+    })
+
+    it('applies desc class to sort icon when descending', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      const header = wrapper.find('.ui-table__header-cell--sortable')
+      await header.trigger('click')
+      await header.trigger('click')
+      expect(wrapper.find('.ui-table__sort-icon--desc').exists()).toBe(true)
+    })
+
+    it('supports keyboard navigation for sorting', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('sort-change')).toBeTruthy()
+    })
+
+    it('supports Space key for sorting', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('keydown', { key: ' ' })
+      expect(wrapper.emitted('sort-change')).toBeTruthy()
+    })
+
+    it('sets aria-sort attribute', async () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      const header = wrapper.find('.ui-table__header-cell--sortable')
+      expect(header.attributes('aria-sort')).toBe('none')
+
+      await header.trigger('click')
+      expect(header.attributes('aria-sort')).toBe('ascending')
+
+      await header.trigger('click')
+      expect(header.attributes('aria-sort')).toBe('descending')
+    })
+
+    it('sorts mixed-type columns stably by grouping types', async () => {
+      const columns = [{ key: 'val', label: 'Value', sortable: true }]
+      const data = [
+        { id: 1, val: '10' },
+        { id: 2, val: 5 },
+        { id: 3, val: null },
+        { id: 4, val: 'apple' },
+        { id: 5, val: 100 },
+        { id: 6, val: true }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      await wrapper.find('.ui-table__header-cell--sortable').trigger('click')
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      const values = rows.map(row => row.find('.ui-table__cell').text())
+      expect(values).toEqual(['5', '100', '10', 'apple', 'true', ''])
+    })
+
+    it('maintains type grouping in descending order', async () => {
+      const columns = [{ key: 'val', label: 'Value', sortable: true }]
+      const data = [
+        { id: 1, val: 'banana' },
+        { id: 2, val: 10 },
+        { id: 3, val: 'apple' },
+        { id: 4, val: 5 }
+      ]
+      const wrapper = mount(DataTable, {
+        props: { columns, data }
+      })
+      const header = wrapper.find('.ui-table__header-cell--sortable')
+      await header.trigger('click')
+      await header.trigger('click')
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      const values = rows.map(row => row.find('.ui-table__cell').text())
+      expect(values).toEqual(['banana', 'apple', '10', '5'])
+    })
+  })
+
+  describe('Row Click', () => {
+    it('emits row-click when row is clicked', async () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      await wrapper.find('.ui-table__row').trigger('click')
+      expect(wrapper.emitted('row-click')).toBeTruthy()
+      expect(wrapper.emitted('row-click')![0]).toEqual([defaultData[0], 0])
+    })
+
+    it('emits row-click with correct row and index', async () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      await rows[2].trigger('click')
+      expect(wrapper.emitted('row-click')![0]).toEqual([defaultData[2], 2])
+    })
+
+    it('does not trigger row-click when checkbox is clicked', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true,
+          selectedIds: []
+        }
+      })
+      await wrapper.find('.ui-table__cell--checkbox').trigger('click')
+      expect(wrapper.emitted('row-click')).toBeFalsy()
+    })
+  })
+
+  describe('Sizes', () => {
+    it('applies small size', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, size: 'sm' }
+      })
+      expect(wrapper.find('.ui-table--sm').exists()).toBe(true)
+    })
+
+    it('applies medium size by default', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table--md').exists()).toBe(true)
+    })
+
+    it('applies large size', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, size: 'lg' }
+      })
+      expect(wrapper.find('.ui-table--lg').exists()).toBe(true)
+    })
+  })
+
+  describe('Visual Options', () => {
+    it('applies striped class', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, striped: true }
+      })
+      expect(wrapper.find('.ui-table--striped').exists()).toBe(true)
+    })
+
+    it('applies hoverable class by default', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table--hoverable').exists()).toBe(true)
+    })
+
+    it('removes hoverable class when disabled', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, hoverable: false }
+      })
+      expect(wrapper.find('.ui-table--hoverable').exists()).toBe(false)
+    })
+
+    it('applies bordered class', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, bordered: true }
+      })
+      expect(wrapper.find('.ui-table--bordered').exists()).toBe(true)
+    })
+
+    it('applies sticky header class', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, stickyHeader: true }
+      })
+      expect(wrapper.find('.ui-table--sticky-header').exists()).toBe(true)
+    })
+  })
+
+  describe('Column Alignment', () => {
+    it('applies left alignment by default', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--left').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__cell--left').exists()).toBe(true)
+    })
+
+    it('applies center alignment', () => {
+      const columns = [{ key: 'name', label: 'Name', align: 'center' as const }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--center').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__cell--center').exists()).toBe(true)
+    })
+
+    it('applies right alignment', () => {
+      const columns = [{ key: 'name', label: 'Name', align: 'right' as const }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--right').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__cell--right').exists()).toBe(true)
+    })
+  })
+
+  describe('Column Width', () => {
+    it('applies custom width to column', () => {
+      const columns = [{ key: 'name', label: 'Name', width: '200px' }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell').attributes('style')).toContain('width: 200px')
+    })
+  })
+
+  describe('Slots', () => {
+    it('renders custom header slot', () => {
+      const columns = [{ key: 'name', label: 'Name' }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData },
+        slots: {
+          'header-name': '<span class="custom-header">Custom Name</span>'
+        }
+      })
+      expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders custom cell slot', () => {
+      const columns = [{ key: 'name', label: 'Name' }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData },
+        slots: {
+          'cell-name': '<span class="custom-cell">Custom</span>'
+        }
+      })
+      expect(wrapper.findAll('.custom-cell').length).toBe(3)
+    })
+
+    it('passes correct props to cell slot', () => {
+      const columns = [{ key: 'name', label: 'Name' }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData },
+        slots: {
+          'cell-name': `
+            <template #cell-name="{ value, row, column, index }">
+              <span class="slot-content" data-value="{{ value }}" data-index="{{ index }}">
+                {{ value }} - {{ index }}
+              </span>
+            </template>
+          `
+        }
+      })
+      expect(wrapper.find('.slot-content').exists()).toBe(true)
+    })
+
+    it('renders loading slot when provided', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData, loading: true },
+        slots: {
+          loading: '<div class="custom-loading">Loading...</div>'
+        }
+      })
+      expect(wrapper.find('.ui-table__row--skeleton').exists()).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has accessible select all checkbox', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true
+        }
+      })
+      const selectAllCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[0]
+      expect(selectAllCheckbox.attributes('aria-label')).toBe('Select all rows')
+    })
+
+    it('has accessible row checkboxes', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          selectable: true
+        }
+      })
+      const rowCheckbox = wrapper.findAllComponents({ name: 'Checkbox' })[1]
+      expect(rowCheckbox.attributes('aria-label')).toBe('Select row 1')
+    })
+
+    it('sortable headers have role button', () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--sortable').attributes('role')).toBe('button')
+    })
+
+    it('sortable headers have tabindex', () => {
+      const columns = [{ key: 'name', label: 'Name', sortable: true }]
+      const wrapper = mount(DataTable, {
+        props: { columns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--sortable').attributes('tabindex')).toBe('0')
+    })
+
+    it('non-sortable headers do not have role', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell').attributes('role')).toBeUndefined()
+    })
+
+    it('cells have data-label for mobile', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      const cell = wrapper.find('.ui-table__cell')
+      expect(cell.attributes('data-label')).toBe('Name')
+    })
+  })
+
+  describe('Search', () => {
+    it('renders search input when searchable', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__toolbar').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__search').exists()).toBe(true)
+    })
+
+    it('does not render search input when not searchable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__toolbar').exists()).toBe(false)
+    })
+
+    it('filters data based on search query', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'John')
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows.length).toBe(1)
+      expect(rows[0].text()).toContain('John Doe')
+    })
+
+    it('emits update:search when search changes', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'test')
+      expect(wrapper.emitted('update:search')).toBeTruthy()
+      expect(wrapper.emitted('update:search')![0]).toEqual(['test'])
+    })
+
+    it('emits filter-change when search changes', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'test')
+      expect(wrapper.emitted('filter-change')).toBeTruthy()
+      expect(wrapper.emitted('filter-change')![0]).toEqual([{ search: 'test', filters: {} }])
+    })
+
+    it('shows no matching results message when search has no matches', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'xyz-no-match')
+      expect(wrapper.find('.ui-table__row--empty').exists()).toBe(true)
+      const emptyState = wrapper.findComponent({ name: 'EmptyState' })
+      expect(emptyState.props('title')).toBe('No matching results')
+    })
+
+    it('resets page to 1 when search changes', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: [...defaultData, ...defaultData, ...defaultData, ...defaultData],
+          searchable: true,
+          pagination: true,
+          pageSize: 2,
+          page: 2
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'John')
+      expect(wrapper.emitted('update:page')).toBeTruthy()
+      expect(wrapper.emitted('update:page')![0]).toEqual([1])
+    })
+
+    it('searches across all columns', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          searchable: true
+        }
+      })
+      const input = wrapper.findComponent({ name: 'Input' })
+      await input.vm.$emit('update:modelValue', 'Admin')
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows.length).toBe(1)
+      expect(rows[0].text()).toContain('John Doe')
+    })
+  })
+
+  describe('Column Filters', () => {
+    it('renders filter row when filterable', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          filterable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__filter-row').exists()).toBe(true)
+    })
+
+    it('does not render filter row when not filterable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__filter-row').exists()).toBe(false)
+    })
+
+    it('renders filter input for each column', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          filterable: true
+        }
+      })
+      const filterInputs = wrapper.findAll('.ui-table__filter-cell input')
+      expect(filterInputs.length).toBe(3)
+    })
+
+    it('filters data based on column filter', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          filterable: true,
+          filters: { name: 'John' }
+        }
+      })
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows.length).toBe(1)
+      expect(rows[0].text()).toContain('John Doe')
+    })
+
+    it('emits update:filters when filter changes', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          filterable: true,
+          filters: {}
+        }
+      })
+      const filterInput = wrapper.findAllComponents({ name: 'Input' })[0]
+      await filterInput.vm.$emit('update:modelValue', 'test')
+      expect(wrapper.emitted('update:filters')).toBeTruthy()
+      expect(wrapper.emitted('update:filters')![0]).toEqual([{ name: 'test' }])
+    })
+
+    it('applies multiple column filters', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          filterable: true,
+          filters: { name: 'Jo', role: 'Admin' }
+        }
+      })
+      const rows = wrapper.findAll('.ui-table__body .ui-table__row')
+      expect(rows.length).toBe(1)
+    })
+
+    it('excludes columns with filterable: false', () => {
+      const columns = [
+        { key: 'name', label: 'Name' },
+        { key: 'email', label: 'Email', filterable: false },
+        { key: 'role', label: 'Role' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: {
+          columns,
+          data: defaultData,
+          filterable: true
+        }
+      })
+      const filterCells = wrapper.findAll('.ui-table__filter-cell')
+      const filterInputs = wrapper.findAll('.ui-table__filter-cell input')
+      expect(filterCells.length).toBe(3)
+      expect(filterInputs.length).toBe(2)
+    })
+  })
+
+  describe('Column Resizing', () => {
+    it('renders resize handles when resizable', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          resizable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__resize-handle').exists()).toBe(true)
+    })
+
+    it('does not render resize handles when not resizable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__resize-handle').exists()).toBe(false)
+    })
+
+    it('applies resizable class to table', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          resizable: true
+        }
+      })
+      expect(wrapper.find('.ui-table--resizable').exists()).toBe(true)
+    })
+
+    it('applies resizable class to header cells', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          resizable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__header-cell--resizable').exists()).toBe(true)
+    })
+
+    it('excludes resize handle from last column', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          resizable: true
+        }
+      })
+      const handles = wrapper.findAll('.ui-table__resize-handle')
+      expect(handles.length).toBe(2)
+    })
+
+    it('excludes column with resizable: false', () => {
+      const columns = [
+        { key: 'name', label: 'Name', resizable: false },
+        { key: 'email', label: 'Email' },
+        { key: 'role', label: 'Role' }
+      ]
+      const wrapper = mount(DataTable, {
+        props: {
+          columns,
+          data: defaultData,
+          resizable: true
+        }
+      })
+      const resizableHeaders = wrapper.findAll('.ui-table__header-cell--resizable')
+      expect(resizableHeaders.length).toBe(2)
+    })
+  })
+
+  describe('Expandable Rows', () => {
+    it('renders expand column when expandable', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true
+        }
+      })
+      expect(wrapper.find('.ui-table__header-cell--expand').exists()).toBe(true)
+      expect(wrapper.find('.ui-table__cell--expand').exists()).toBe(true)
+    })
+
+    it('does not render expand column when not expandable', () => {
+      const wrapper = mount(DataTable, {
+        props: { columns: defaultColumns, data: defaultData }
+      })
+      expect(wrapper.find('.ui-table__header-cell--expand').exists()).toBe(false)
+    })
+
+    it('renders expand button in each row', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true
+        }
+      })
+      const expandButtons = wrapper.findAll('.ui-table__expand-button')
+      expect(expandButtons.length).toBe(3)
+    })
+
+    it('emits update:expandedIds when expand button is clicked', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: []
+        }
+      })
+      await wrapper.find('.ui-table__expand-button').trigger('click')
+      expect(wrapper.emitted('update:expandedIds')).toBeTruthy()
+      expect(wrapper.emitted('update:expandedIds')![0]).toEqual([[1]])
+    })
+
+    it('emits row-expand when row is expanded', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: []
+        }
+      })
+      await wrapper.find('.ui-table__expand-button').trigger('click')
+      expect(wrapper.emitted('row-expand')).toBeTruthy()
+      expect(wrapper.emitted('row-expand')![0]).toEqual([defaultData[0], true])
+    })
+
+    it('shows expansion row when row is expanded', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: [1]
+        }
+      })
+      expect(wrapper.find('.ui-table__row--expansion').exists()).toBe(true)
+    })
+
+    it('hides expansion row when row is collapsed', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: []
+        }
+      })
+      expect(wrapper.find('.ui-table__row--expansion').exists()).toBe(false)
+    })
+
+    it('applies expanded class to expanded row', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: [1]
+        }
+      })
+      expect(wrapper.find('.ui-table__row--expanded').exists()).toBe(true)
+    })
+
+    it('renders expanded slot content', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: [1]
+        },
+        slots: {
+          expanded: '<div class="custom-expanded">Expanded content</div>'
+        }
+      })
+      expect(wrapper.find('.custom-expanded').exists()).toBe(true)
+    })
+
+    it('collapses expanded row when button is clicked again', async () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: [1]
+        }
+      })
+      await wrapper.find('.ui-table__expand-button').trigger('click')
+      expect(wrapper.emitted('update:expandedIds')![0]).toEqual([[]])
+    })
+
+    it('has accessible expand button', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: []
+        }
+      })
+      const expandButton = wrapper.find('.ui-table__expand-button')
+      expect(expandButton.attributes('aria-expanded')).toBe('false')
+      expect(expandButton.attributes('aria-label')).toBe('Expand row')
+    })
+
+    it('updates aria-expanded when row is expanded', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: defaultData,
+          expandable: true,
+          expandedIds: [1]
+        }
+      })
+      const expandButton = wrapper.find('.ui-table__expand-button')
+      expect(expandButton.attributes('aria-expanded')).toBe('true')
+      expect(expandButton.attributes('aria-label')).toBe('Collapse row')
+    })
+
+    it('counts expand column in total columns', () => {
+      const wrapper = mount(DataTable, {
+        props: {
+          columns: defaultColumns,
+          data: [],
+          expandable: true
+        }
+      })
+      const emptyCell = wrapper.find('.ui-table__cell--empty')
+      expect(emptyCell.attributes('colspan')).toBe('4')
+    })
+  })
+})