@awsui/components-react/table/index.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React from 'react';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
import { getAnalyticsMetadataProps } from '../internal/base-component';
import { CollectionPreferencesMetadata } from '../internal/context/collection-preferences-metadata-context';
import useBaseComponent from '../internal/hooks/use-base-component';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import { getSortingColumnId } from './header-cell/utils';
import InternalTable, { InternalTableAsSubstep } from './internal';
const Table = React.forwardRef(({ items = [], selectedItems = [], variant = 'container', contentDensity = 'comfortable', cellVerticalAlign = 'middle', firstIndex = 1, ...props }, ref) => {
    var _a, _b, _c;
    const analyticsMetadata = getAnalyticsMetadataProps(props);
    const hasHiddenColumns = (props.visibleColumns && props.visibleColumns.length < props.columnDefinitions.length) ||
        ((_a = props.columnDisplay) === null || _a === void 0 ? void 0 : _a.some(col => !col.visible));
    const hasStickyColumns = !!((_b = props.stickyColumns) === null || _b === void 0 ? void 0 : _b.first) || !!((_c = props.stickyColumns) === null || _c === void 0 ? void 0 : _c.last);
    const baseComponentProps = useBaseComponent('Table', {
        props: {
            contentDensity,
            resizableColumns: props.resizableColumns,
            selectionType: props.selectionType,
            stickyHeader: props.stickyHeader,
            stripedRows: props.stripedRows,
            variant,
            wrapLines: props.wrapLines,
            enableKeyboardNavigation: props.enableKeyboardNavigation,
            totalItemsCount: props.totalItemsCount,
            flowType: analyticsMetadata.flowType,
            cellVerticalAlign,
        },
        metadata: {
            expandableRows: !!props.expandableRows,
            progressiveLoading: !!props.getLoadingStatus,
            inlineEdit: props.columnDefinitions.some(def => !!def.editConfig),
            disabledInlineEdit: props.columnDefinitions.some(def => { var _a; return !!((_a = def.editConfig) === null || _a === void 0 ? void 0 : _a.disabledReason); }),
            hasSortableColumns: props.columnDefinitions.some(def => def.sortingField || def.sortingComparator),
            hasHiddenColumns,
            hasStickyColumns,
            hasFilterSlot: !!props.filter,
            hasPaginationSlot: !!props.pagination,
            itemsCount: items.length,
            hasInstanceIdentifier: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier),
            hasResourceType: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType),
            usesVisibleColumns: !!props.visibleColumns,
            usesColumnDisplay: !!props.columnDisplay,
            usesColumnDefinitionsVerticalAlign: props.columnDefinitions.some(def => def.verticalAlign !== cellVerticalAlign),
        },
    }, analyticsMetadata);
    const analyticsComponentMetadata = {
        name: 'awsui.Table',
        label: { root: 'self' },
        properties: {
            selectionType: props.selectionType || 'none',
            itemsCount: `${items.length}`,
            selectedItemsCount: `${selectedItems.length}`,
            variant,
        },
    };
    const sortingColumnId = getSortingColumnId(props.columnDefinitions, props.sortingColumn);
    if (sortingColumnId) {
        analyticsComponentMetadata.properties.sortingColumnId = sortingColumnId;
        analyticsComponentMetadata.properties.sortingDescending = `${props.sortingDescending || false}`;
    }
    const tableProps = {
        items,
        selectedItems,
        variant,
        contentDensity,
        firstIndex,
        cellVerticalAlign,
        ...props,
        ...baseComponentProps,
        ref,
        ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }),
    };
    const collectionPreferencesMetadata = {
        tableContentDensity: contentDensity,
        tableHasStripedRows: !!props.stripedRows,
        tableHasHiddenColumns: hasHiddenColumns,
        tableHasStickyColumns: hasStickyColumns,
    };
    if (variant === 'borderless' || variant === 'embedded') {
        return (React.createElement(CollectionPreferencesMetadata.Provider, { value: collectionPreferencesMetadata },
            React.createElement(InternalTable, { ...tableProps })));
    }
    return (React.createElement(CollectionPreferencesMetadata.Provider, { value: collectionPreferencesMetadata },
        React.createElement(AnalyticsFunnelSubStep, null,
            React.createElement(InternalTableAsSubstep, { ...tableProps }))));
});
applyDisplayName(Table, 'Table');
export default Table;
//# sourceMappingURL=index.js.map