feat(Table): Allow use of custom header and support more header props. Close #919 #920

packages/ui/src/components/Table/components/FullDataTable/index.tsx

@@ -17,11 +17,10 @@ import { FC, useCallback } from 'react';
 import TableComponent, { TableProps as CloudscapeTableProps } from '@cloudscape-design/components/table';
 import Pagination from '@cloudscape-design/components/pagination';
 import { useCollection } from '@cloudscape-design/collection-hooks';
-
 import TextFilter from '@cloudscape-design/components/text-filter';
-import Header from '@cloudscape-design/components/header';
 import Button from '@cloudscape-design/components/button';
 import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
+import Header from '../Header';
 import EmptyState from '../EmptyState';
 import { BaseTableProps, InternalTableProps } from '../../types';
 import {
@@ -118,16 +117,18 @@ const FullDataTable: FC<BaseTableProps & InternalTableProps> = ({
                 ))
             }
             header={
-                <Header
-                    counter={
-                        collectionProps.selectedItems?.length
-                            ? `(${collectionProps.selectedItems.length}/${allItems.length})`
-                            : `(${allItems.length})`
-                    }
-                    actions={props.actions}
-                >
-                    {header}
-                </Header>
+                header && (
+                    <Header
+                        actions={props.actions}
+                        info={props.info}
+                        variant={props.headerVariant}
+                        description={props.description}
+                        allItemsLength={allItems.length}
+                        selectedItemsLength={collectionProps?.selectedItems?.length}
+                    >
+                        {header}
+                    </Header>
+                )
             }
         />
     );

packages/ui/src/components/Table/components/Header/index.tsx

@@ -0,0 +1,60 @@
+/** *******************************************************************************************************************
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.                                                                              *
+ ******************************************************************************************************************** */
+import { FC, isValidElement, createElement, PropsWithChildren, useMemo } from 'react';
+import CloudscapeHeader, { HeaderProps as CloudscapeHeaderProps } from '@cloudscape-design/components/header';
+
+export interface HeaderProps {
+    actions?: CloudscapeHeaderProps['actions'];
+    info?: CloudscapeHeaderProps['info'];
+    variant?: CloudscapeHeaderProps['variant'];
+    description?: CloudscapeHeaderProps['description'];
+    allItemsLength?: number;
+    selectedItemsLength?: number;
+}
+
+const CloudscapeHeaderType = createElement(CloudscapeHeader).type;
+
+const Header: FC<PropsWithChildren<HeaderProps>> = ({
+    selectedItemsLength,
+    allItemsLength,
+    children,
+    actions,
+    info,
+    description,
+    variant,
+}) => {
+    const customHeader = isValidElement(children) && children.type === CloudscapeHeaderType;
+
+    const counter = useMemo(
+        () =>
+            allItemsLength
+                ? selectedItemsLength
+                    ? `(${selectedItemsLength}/${allItemsLength})`
+                    : `(${allItemsLength})`
+                : undefined,
+        [allItemsLength, selectedItemsLength]
+    );
+
+    return customHeader ? (
+        children
+    ) : (
+        <CloudscapeHeader counter={counter} info={info} actions={actions} description={description} variant={variant}>
+            {children}
+        </CloudscapeHeader>
+    );
+};
+
+export default Header;

packages/ui/src/components/Table/components/RemoteUpdateTable/index.tsx

@@ -17,13 +17,13 @@ import { FC, useMemo, useState, useCallback, useEffect } from 'react';
 import TableComponent, { TableProps as CloudscapeTableProps } from '@cloudscape-design/components/table';
 import Pagination, { PaginationProps } from '@cloudscape-design/components/pagination';
 import TextFilter, { TextFilterProps } from '@cloudscape-design/components/text-filter';
-import Header from '@cloudscape-design/components/header';
 import Button from '@cloudscape-design/components/button';
 import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import { useDebouncedCallback } from 'use-debounce';
 import getPageCount from '../../utils/getPageCount';
 
 import EmptyState from '../EmptyState';
+import Header from '../Header';
 import { RemoteUpdateTableProps, InternalTableProps, FetchDataOptions } from '../../types';
 import {
     DEFAULT_TRACK_BY,
@@ -184,18 +184,17 @@ const RemoteUpdateTable: FC<RemoteUpdateTableProps & InternalTableProps> = ({
                 ))
             }
             header={
-                header && typeof header === 'string' ? (
+                header && (
                     <Header
-                        counter={
-                            selectedItems.length
-                                ? `(${selectedItems.length}/${totalItemsCount})`
-                                : `(${totalItemsCount})`
-                        }
+                        actions={props.actions}
+                        info={props.info}
+                        variant={props.headerVariant}
+                        description={props.description}
+                        allItemsLength={totalItemsCount}
+                        selectedItemsLength={selectedItems.length}
                     >
                         {header}
                     </Header>
-                ) : (
-                    header
                 )
             }
         />

packages/ui/src/components/Table/index.stories.tsx

@@ -22,6 +22,10 @@ import shortData from './data/short';
 import longData from './data/long';
 import { DataType } from './data/type';
 import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
+import Header from '@cloudscape-design/components/header';
+import Button from '@cloudscape-design/components/button';
+import Link from '@cloudscape-design/components/link';
+import SpaceBetween from '@cloudscape-design/components/space-between';
 
 export default {
     component: Table,
@@ -49,6 +53,14 @@ Default.args = {
     columnDefinitions: columnDefinition,
     items: shortData,
     header: 'Table Title',
+    actions: (
+        <SpaceBetween direction="horizontal" size="xs">
+            <Button>Secondary button</Button>
+            <Button variant="primary">Primary button</Button>
+        </SpaceBetween>
+    ),
+    info: <Link variant="info">Info</Link>,
+    description: 'Table description',
     onFetchData: undefined,
 };
 
@@ -108,6 +120,12 @@ DisableFilters.args = {
     disableFilters: true,
 };
 
+export const DisableSelect = Template.bind({});
+DisableSelect.args = {
+    ...Default.args,
+    disableRowSelect: true,
+};
+
 export const PureTable = Template.bind({});
 PureTable.args = {
     ...Default.args,
@@ -133,6 +151,26 @@ DefaultSingleSelect.args = {
     ],
 };
 
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+    columnDefinitions: columnDefinition,
+    items: shortData,
+    header: (
+        <Header
+            variant="h2"
+            info={<Link variant="info">Info</Link>}
+            actions={
+                <SpaceBetween direction="horizontal" size="xs">
+                    <Button>Secondary button</Button>
+                    <Button variant="primary">Create</Button>
+                </SpaceBetween>
+            }
+        >
+            Custom Header
+        </Header>
+    ),
+};
+
 interface TestDataType {
     id: number;
     name: string;

packages/ui/src/components/Table/types.ts

@@ -14,9 +14,10 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import { TableProps as CloudscapeTableProps } from '@cloudscape-design/components/table';
+import { HeaderProps } from '@cloudscape-design/components/header';
 import { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences';
 
-export interface BaseTableProps extends CloudscapeTableProps {
+export interface BaseTableProps extends CloudscapeTableProps, Pick<HeaderProps, 'actions' | 'info' | 'description'> {
     /**
      * Disable pagination
      * */
@@ -46,9 +47,14 @@ export interface BaseTableProps extends CloudscapeTableProps {
      * */
     defaultPageIndex?: number;
     /**
-     * The actions displayed on the header
+     * The heading text (together with actions, info and description props to form a Table header) <br/>
+     * or the Cloudscape header component.
      */
-    actions?: React.ReactNode;
+    header?: React.ReactNode;
+    /**
+     * The variant of the table header.
+     */
+    headerVariant?: HeaderProps['variant'];
 }
 
 export interface FetchDataOptions {