[Docs]: draft table header grouped example

epam · Nov 25, 2024 · ad144c8 · ad144c8
1 parent 4055396
commit ad144c8
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 2 deletions.
diff --git a/app/src/docs/_examples/tables/TableGroupedHeader.example.tsx b/app/src/docs/_examples/tables/TableGroupedHeader.example.tsx
@@ -0,0 +1,139 @@
+import React, { ReactNode, useMemo, useState } from 'react';
+import {
+    DataSourceState,
+    DataColumnProps,
+    useUuiContext,
+    useLazyDataSource,
+    DropdownBodyProps,
+    DataColumnGroupProps,
+} from '@epam/uui-core';
+import { Dropdown, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuBody, Text, DataTable, Panel, IconButton } from '@epam/uui';
+import { City } from '@epam/uui-docs';
+import { ReactComponent as MoreIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
+import { ReactComponent as PencilIcon } from '@epam/assets/icons/common/content-edit-18.svg';
+
+import css from './TablesExamples.module.scss';
+import { TApi } from '../../../data';
+
+export default function TableGroupedHeaderExample() {
+    const svc = useUuiContext<TApi>();
+    const [tableState, setTableState] = useState<DataSourceState>({});
+
+    const renderMenu = (dropdownProps: DropdownBodyProps): ReactNode => (
+        <DropdownMenuBody minWidth={ 90 } { ...dropdownProps }>
+            <DropdownMenuButton caption="Edit" icon={ PencilIcon } iconPosition="right" />
+            <DropdownMenuButton caption="Remove" />
+            <DropdownMenuSplitter />
+            <DropdownMenuButton caption="Cancel" />
+        </DropdownMenuBody>
+    );
+
+    // Define columns groups array
+    const columnGroups: DataColumnGroupProps[] = [
+        {
+            key: 'primary',
+            caption: 'Primary info',
+            textAlign: 'center',
+        },
+    ];
+
+    // Define columns config array
+    const citiesColumns: DataColumnProps<City>[] = useMemo(
+        () => [
+            {
+                key: 'id',
+                caption: 'Id',
+                group: 'primary', // key group from columnGroups array
+                render: (city) => (
+                    <Text color="primary" fontSize="14">
+                        {city.id}
+                    </Text>
+                ),
+                isSortable: true,
+                width: 120,
+            },
+            {
+                key: 'name',
+                caption: 'Name',
+                group: 'primary', // key group from columnGroups array
+                render: (city) => (
+                    <Text color="primary" fontSize="14">
+                        {city.name}
+                    </Text>
+                ),
+                isSortable: true,
+                width: 162,
+                grow: 1,
+            },
+            {
+                key: 'countryName',
+                caption: 'Country',
+                group: 'primary', // key group from columnGroups array
+                render: (city) => (
+                    <Text color="primary" fontSize="14">
+                        {city.countryName}
+                    </Text>
+                ),
+                isSortable: true,
+                width: 128,
+                isFilterActive: (filter) => filter.country && filter.country.$in && !!filter.country.$in.length,
+            },
+            {
+                key: 'population',
+                caption: 'Population',
+                info: 'Number of this population in the country at the time of the last census.',
+                render: (city) => (
+                    <Text color="primary" fontSize="14">
+                        {city.population}
+                    </Text>
+                ),
+                width: 136,
+                isSortable: true,
+                textAlign: 'right',
+            },
+            {
+                key: 'altname',
+                caption: 'Alt. names',
+                render: (city) => <Text color="primary">{city.alternativeNames.join(', ')}</Text>,
+                info: 'Alternative city names',
+                width: 1200,
+            },
+            {
+                key: 'actions',
+                render: () => (
+                    <Dropdown
+                        renderTarget={ (props) => <IconButton icon={ MoreIcon } color="secondary" cx={ [css.configItem, props.isOpen && css.showButton] } { ...props } /> }
+                        renderBody={ (dropdownProps) => renderMenu(dropdownProps) }
+                        placement="bottom-end"
+                    />
+                ),
+                width: 54,
+                fix: 'right',
+                allowResizing: false,
+            },
+        ],
+        [],
+    );
+
+    const citiesDS = useLazyDataSource<City, string, unknown>({
+        api: svc.api.demo.cities,
+        backgroundReload: true,
+    }, []);
+
+    const view = citiesDS.useView(tableState, setTableState);
+
+    return (
+        <Panel background="surface-main" shadow cx={ css.container }>
+            <DataTable
+                value={ tableState }
+                onValueChange={ setTableState }
+                { ...view.getListProps() }
+                getRows={ view.getVisibleRows }
+                showColumnsConfig={ false }
+                columnGroups={ columnGroups }
+                headerTextCase="upper"
+                columns={ citiesColumns }
+            />
+        </Panel>
+    );
+}
diff --git a/app/src/docs/tables/Advanced.doc.tsx b/app/src/docs/tables/Advanced.doc.tsx
@@ -14,15 +14,17 @@ export class AdvancedTablesDoc extends BaseDocsBlock {
 
                 <DocExample cx={ css.appBg } title="Columns Configuration" path="./_examples/tables/ColumnsConfig.example.tsx" />
 
-                <DocExample cx={ css.appBg } title="Table with rows Drag&Drop" path="./_examples/tables/TableWithDnD.example.tsx" />
-
                 <DocExample cx={ css.appBg } title="Table with paging and select page" path="./_examples/tables/PagedTable.example.tsx" />
                 <DocExample cx={ css.appBg } title="Table with paging and select all rows" path="./_examples/tables/PagedTableWithSelectAll.example.tsx" />
 
                 <DocExample cx={ css.appBg } title="Table with column filters" path="./_examples/tables/ColumnFiltersTable.example.tsx" />
 
                 <DocExample cx={ css.appBg } title="Table with pinned rows" path="./_examples/tables/TableWithPinnedRows.example.tsx" />
                 <DocExample cx={ css.appBg } title="Table with expandable rows" path="./_examples/tables/TableWithExpandableRows.example.tsx" />
+
+                <DocExample cx={ css.appBg } title="Table with rows Drag&Drop" path="./_examples/tables/TableWithDnD.example.tsx" />
+
+                <DocExample cx={ css.appBg } title="Table with header groups" path="./_examples/tables/TableGroupedHeader.example.tsx" />
             </>
         );
     }