feat: table widget pagination and sortingdisabled

awslabs · Sep 13, 2023 · b727eae · b727eae
1 parent 13573c5
commit b727eae
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 7 deletions.
diff --git a/packages/dashboard/src/customization/widgets/table/component.tsx b/packages/dashboard/src/customization/widgets/table/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { Table, TableColumnDefinition } from '@iot-app-kit/react-components';
@@ -7,6 +7,9 @@ import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { TableWidget } from '../types';
 import { useQueries } from '~/components/dashboard/queryContext';
+import { useChartSize } from '~/hooks/useChartSize';
+import { DEFAULT_PREFERENCES } from './table-config';
+import { TABLE_OVERFLOW_HEIGHT, TABLE_WIDGET_MAX_HEIGHT } from './constants';
 
 export const DEFAULT_TABLE_COLUMN_DEFINITIONS: TableColumnDefinition[] = [
   {
@@ -43,6 +46,8 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
   const key = computeQueryConfigKey(viewport, widget.properties.queryConfig);
 
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
+  const [preferences] = useState(DEFAULT_PREFERENCES); //TODO: setpreference will add once page preferences are added
+  const chartSize = useChartSize(widget);
 
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement;
@@ -55,7 +60,13 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
   };
 
   return (
-    <div onMouseDown={handleMouseDown}>
+    <div
+      onMouseDown={handleMouseDown}
+      style={{
+        maxHeight: chartSize.height > TABLE_WIDGET_MAX_HEIGHT ? `${TABLE_WIDGET_MAX_HEIGHT}px` : chartSize.height,
+        overflow: chartSize.height > TABLE_OVERFLOW_HEIGHT ? 'auto' : 'scroll',
+      }}
+    >
       <Table
         resizableColumns
         key={key}
@@ -65,6 +76,10 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
         items={items}
         thresholds={thresholds}
         significantDigits={significantDigits}
+        sortingDisabled
+        stickyHeader
+        pageSize={preferences.pageSize}
+        paginationEnabled
       />
     </div>
   );

diff --git a/packages/dashboard/src/customization/widgets/table/constants.ts b/packages/dashboard/src/customization/widgets/table/constants.ts
@@ -0,0 +1,7 @@
+export const TABLE_WIDGET_INITIAL_HEIGHT = 300;
+
+export const TABLE_WIDGET_INITIAL_WIDTH = 850;
+
+export const TABLE_WIDGET_MAX_HEIGHT = 520;
+
+export const TABLE_OVERFLOW_HEIGHT = 200;
diff --git a/packages/dashboard/src/customization/widgets/table/plugin.tsx b/packages/dashboard/src/customization/widgets/table/plugin.tsx
@@ -6,6 +6,7 @@ import { toId } from '@iot-app-kit/source-iotsitewise';
 import type { DashboardPlugin } from '~/customization/api';
 import type { TableWidget } from '../types';
 import type { onDropHandler } from '~/customization/widgets/queryWidget/multiQueryWidget';
+import { TABLE_WIDGET_INITIAL_HEIGHT, TABLE_WIDGET_INITIAL_WIDTH } from './constants';
 
 const tableOnDropAsset: onDropHandler = (item, widget: TableWidget) => {
   const { assetSummary } = item;
@@ -61,8 +62,8 @@ export const tablePlugin: DashboardPlugin = {
         },
       }),
       initialSize: {
-        height: 170,
-        width: 270,
+        height: TABLE_WIDGET_INITIAL_HEIGHT,
+        width: TABLE_WIDGET_INITIAL_WIDTH,
       },
     });
   },

diff --git a/packages/dashboard/src/customization/widgets/table/table-config.tsx b/packages/dashboard/src/customization/widgets/table/table-config.tsx
@@ -0,0 +1,3 @@
+export const DEFAULT_PREFERENCES = {
+  pageSize: 20,
+};
diff --git a/packages/react-components/src/components/table/constants.ts b/packages/react-components/src/components/table/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_PAGE_SIZE = 20;
diff --git a/packages/react-components/src/components/table/table.tsx b/packages/react-components/src/components/table/table.tsx
@@ -21,6 +21,8 @@ export const Table = ({
   sorting,
   styles,
   significantDigits,
+  paginationEnabled,
+  pageSize,
   ...props
 }: {
   columnDefinitions: TableColumnDefinition[];
@@ -32,7 +34,9 @@ export const Table = ({
   viewport?: Viewport;
   styles?: StyleSettingsMap;
   significantDigits?: number;
-} & Pick<TableBaseProps, 'resizableColumns'>) => {
+  paginationEnabled?: boolean;
+  pageSize?: number;
+} & Pick<TableBaseProps, 'resizableColumns' | 'sortingDisabled' | 'stickyHeader'>) => {
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,
     queries,
@@ -64,6 +68,8 @@ export const Table = ({
       propertyFiltering={propertyFiltering}
       messageOverrides={DEFAULT_TABLE_MESSAGES}
       precision={significantDigits}
+      paginationEnabled={paginationEnabled}
+      pageSize={pageSize}
     />
   );
 };
diff --git a/packages/react-components/src/components/table/tableBase.tsx b/packages/react-components/src/components/table/tableBase.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { PropertyFilter, Table } from '@cloudscape-design/components';
+import { Pagination, PropertyFilter, Table } from '@cloudscape-design/components';
 import { useCollection } from '@cloudscape-design/collection-hooks';
 import { getDefaultColumnDefinitions } from './tableHelpers';
 import type { FunctionComponent } from 'react';
 import type { TableProps } from './types';
+import { DEFAULT_PAGE_SIZE } from './constants';
 
 export const TableBase: FunctionComponent<TableProps> = (props) => {
   const {
@@ -13,14 +14,22 @@ export const TableBase: FunctionComponent<TableProps> = (props) => {
     columnDefinitions: userColumnDefinitions,
     messageOverrides: { propertyFilter },
     precision,
+    paginationEnabled,
+    pageSize,
   } = props;
-  const { items, collectionProps, propertyFilterProps } = useCollection(userItems, { sorting, propertyFiltering });
+  const { items, collectionProps, propertyFilterProps, paginationProps } = useCollection(userItems, {
+    sorting,
+    propertyFiltering,
+    pagination: { pageSize: pageSize ?? DEFAULT_PAGE_SIZE },
+  });
   const columnDefinitions = getDefaultColumnDefinitions(userColumnDefinitions, precision);
+  const pagination = { ...(paginationEnabled && { pagination: <Pagination {...paginationProps} /> }) };
 
   return (
     <Table
       {...props}
       {...collectionProps}
+      {...pagination}
       items={items}
       columnDefinitions={columnDefinitions}
       filter={propertyFiltering && <PropertyFilter {...propertyFilterProps} i18nStrings={propertyFilter} />}

diff --git a/packages/react-components/src/components/table/types.ts b/packages/react-components/src/components/table/types.ts
@@ -50,4 +50,6 @@ export interface TableProps extends Omit<CloudscapeTableProps<TableItemHydrated>
   propertyFiltering?: UseCollectionOptions<TableItemHydrated>['propertyFiltering'];
   messageOverrides: TableMessages;
   precision?: number;
+  pageSize?: number;
+  paginationEnabled?: boolean;
 }