refactor(Table): expose SortByColumnOptions through TableColumn inter…

…face
kronostechnologies · Jun 2, 2021 · 2d0a7f5 · 2d0a7f5
1 parent 740bbdb
commit 2d0a7f5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { CellProps, Column, Row, TableState, useSortBy, useTable } from 'react-table';
+import { CellProps, Column, Row, TableState, useSortBy, useTable, UseSortByColumnOptions } from 'react-table';
 import styled from 'styled-components';
 import { Theme } from '../../themes';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -18,7 +18,7 @@ interface StyledTableProps {
     rowSize?: RowSize;
 }
 
-type CustomColumn<T extends object> = Column<T> & {
+type CustomColumn<T extends object> = Column<T> & UseSortByColumnOptions<T> & {
     defaultSort?: ColumnSort;
     sortable?: boolean,
     textAlign?: string,

diff --git a/packages/storybook/stories/table.stories.tsx b/packages/storybook/stories/table.stories.tsx
@@ -260,7 +260,14 @@ export const SmallRows: Story = () => {
 };
 
 export const RowClickCallback: Story = () => {
-    const columns: TableColumn<Data> = [
+    interface DataWithHref {
+        column1: string;
+        column2: string;
+        column3: string;
+        href: string;
+    }
+
+    const columns: TableColumn<DataWithHref> = [
         {
             Header: 'Column 1',
             accessor: 'column1',
@@ -275,13 +282,6 @@ export const RowClickCallback: Story = () => {
         },
     ];
 
-    interface DataWithHref {
-        column1: string;
-        column2: string;
-        column3: string;
-        href: string;
-    }
-
     const data: TableRow<DataWithHref>[] = [
         {
             column1: 'a',