feat(component): use ReactNode for table actions

packages/big-design/src/components/StatefulTable/spec.tsx

@@ -277,7 +277,7 @@ test('sorts using a custom sorting function', () => {
 });
 
 test('renders custom actions', () => {
-  const { getByTestId } = render(getSimpleTable({ actions: () => <div data-testid="customAction">Test Action</div> }));
+  const { getByTestId } = render(getSimpleTable({ actions: <div data-testid="customAction">Test Action</div> }));
 
   const customAction = getByTestId('customAction');
 

packages/big-design/src/components/Table/Actions/Actions.tsx

@@ -10,7 +10,7 @@ import { TableItem, TablePaginationProps, TableSelectable } from '../types';
 import { StyledFlex } from './styled';
 
 export interface ActionsProps<T> {
-  customActions?: React.ComponentType<any>;
+  customActions?: React.ReactNode;
   forwardedRef: RefObject<HTMLDivElement>;
   itemName?: string;
   items: T[];
@@ -51,9 +51,7 @@ const InternalActions = <T extends TableItem>({
   };
 
   const renderActions = () => {
-    const CustomActions = customActions;
-
-    return CustomActions ? <CustomActions /> : null;
+    return customActions ?? null;
   };
 
   return (

packages/big-design/src/components/Table/spec.tsx

@@ -433,7 +433,7 @@ describe('sortable', () => {
 
   test('renders custom actions', () => {
     const { getByTestId } = render(
-      <Table columns={columns} items={items} actions={() => <div data-testid="customAction">Test Action</div>} />,
+      <Table columns={columns} items={items} actions={<div data-testid="customAction">Test Action</div>} />,
     );
 
     const customAction = getByTestId('customAction');

packages/big-design/src/components/Table/types.ts

@@ -36,7 +36,7 @@ export interface TableColumn<T> {
 export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
 
 export interface TableProps<T> extends React.TableHTMLAttributes<HTMLTableElement> {
-  actions?: React.ComponentType<T>;
+  actions?: React.ReactNode;
   columns: Array<TableColumn<T>>;
   emptyComponent?: React.ReactElement;
   headerless?: boolean;

packages/docs/PropTables/StatefulTablePropTable.tsx

@@ -66,7 +66,7 @@ const statefulTableProps: Prop[] = [
   },
   {
     name: 'actions',
-    types: 'React.ComponentType<any>',
+    types: 'React.ReactNode',
     description: 'Component to render custom actions.',
   },
   {

packages/docs/PropTables/TablePropTable.tsx

@@ -71,7 +71,7 @@ const tableProps: Prop[] = [
   },
   {
     name: 'actions',
-    types: 'React.ComponentType<any>',
+    types: 'React.ReactNode',
     description: 'Component to render custom actions.',
   },
   {