diff --git a/packages/data-table/src/__tests__/data-table.test.tsx b/packages/data-table/src/__tests__/data-table.test.tsx
index 0fc8d992..11f07020 100644
--- a/packages/data-table/src/__tests__/data-table.test.tsx
+++ b/packages/data-table/src/__tests__/data-table.test.tsx
@@ -156,6 +156,54 @@ describe('DataTable — row selection + bulk actions', () => {
});
});
+describe('DataTable — column resizing', () => {
+ it('exposes a resize separator that updates column width on drag', () => {
+ render(
+
+ );
+ const nameHeader = screen.getByRole('button', { name: 'Name' }).closest('th') as HTMLElement;
+ const startWidth = nameHeader.style.width;
+ const handle = screen.getByLabelText('Resize name');
+ fireEvent.mouseDown(handle, { clientX: 100 });
+ fireEvent.mouseMove(document, { clientX: 180 });
+ fireEvent.mouseUp(document);
+ expect(nameHeader.style.width).not.toBe(startWidth);
+ });
+});
+
+describe('DataTable — column reordering', () => {
+ it('reorders columns via header drag-and-drop', () => {
+ render(
+
+ );
+ const headerRow = screen.getAllByRole('row')[0]!;
+ const headerText = () =>
+ within(headerRow)
+ .getAllByRole('columnheader')
+ .map(th => th.textContent);
+ expect(headerText()[0]).toContain('Name');
+
+ const nameTh = screen.getByRole('button', { name: 'Name' }).closest('th')!;
+ const ageTh = screen.getByRole('button', { name: 'Age' }).closest('th')!;
+ fireEvent.dragStart(nameTh);
+ fireEvent.dragOver(ageTh);
+ fireEvent.drop(ageTh);
+ expect(headerText()[0]).toContain('Age');
+ });
+});
+
describe('DataTable — column pinning', () => {
it('pins a column to the left via the header toggle', () => {
render(