diff --git a/packages/tablev2/Table.tsx b/packages/tablev2/Table.tsx index 90a8cd9a1..b62106c5b 100644 --- a/packages/tablev2/Table.tsx +++ b/packages/tablev2/Table.tsx @@ -146,6 +146,12 @@ function HeaderCell({ className={style.sortableButton} > {column.header} + {Boolean(column.sorter) && ( + + )} ) : ( column.header @@ -155,7 +161,7 @@ function HeaderCell({
@@ -27,6 +27,10 @@ exports[`Table v2 rendering renders default 1`] = `
Name
+
@@ -981,6 +985,10 @@ exports[`Table v2 rendering renders without a sticky first column 1`] = `
Name
+
css` "currentColor" )}; } +`; + +export const headerHover = css` &:hover { - &:after { - display: inline-block; + .sortIcon { + :after { + display: inline-block; + } } } `; diff --git a/packages/tablev2/tablev2.test.tsx b/packages/tablev2/tablev2.test.tsx index 2784b6c3a..d47da37a8 100644 --- a/packages/tablev2/tablev2.test.tsx +++ b/packages/tablev2/tablev2.test.tsx @@ -265,6 +265,35 @@ describe("Table v2", () => { expect(sorterFn).toHaveBeenCalledWith("desc", -1); }); + it("calls the function passed to the 'sorter' prop when clicking the arrow besides heading", () => { + const sorterFn = jest.fn(); + const { getByTestId } = render( + el.id.toString()} + columns={[ + { + id: "name", + header:
Name
, + textAlign: "left", + render: x => ( + + {x.name} + + ), + initialWidth: "300px", + sorter: sorterFn + } + ]} + initialSorter={{ by: "name", order: "asc" }} + /> + ); + + expect(sorterFn).toHaveBeenCalledWith("asc", 1); + const sortIcon = getByTestId("sortIcon"); + sortIcon.click(); + expect(sorterFn).toHaveBeenLastCalledWith("desc", -1); + }); it("sorts strings with Sorter.string", () => { const nameSort = Sorter.string("name"); const ascSort = nameSort("asc", -1);