feat(PaginatedTable): add note for column head

Author: Raubzeug

src/components/PaginatedTable/PaginatedTable.scss

@@ -79,50 +79,69 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: var(--g-spacing-2);
 
         width: 100%;
         max-width: 100%;
         padding: var(--paginated-table-cell-vertical-padding)
             var(--paginated-table-cell-horizontal-padding);
 
+        font-weight: bold;
+        cursor: default;
         &_align {
             &_left {
                 justify-content: left;
+
+                text-align: left;
             }
             &_center {
                 justify-content: center;
+
+                text-align: center;
             }
             &_right {
                 justify-content: right;
+
+                text-align: right;
+
+                #{$block}__head-cell-content-container {
+                    flex-direction: row-reverse;
+                }
             }
         }
     }
 
-    &__head-cell {
-        gap: 8px;
-
-        font-weight: bold;
-        cursor: default;
-
-        &_sortable {
-            cursor: pointer;
+    &__head-cell_sortable {
+        cursor: pointer;
 
-            &#{$block}__head-cell_align_right {
-                flex-direction: row-reverse;
-            }
+        &#{$block}__head-cell_align_right {
+            flex-direction: row-reverse;
         }
     }
 
+    &__head-cell-note {
+        display: flex;
+    }
+
     // Separate head cell content class for correct text ellipsis overflow
     &__head-cell-content {
         overflow: hidden;
 
-        width: min-content;
-
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
+    &__head-cell-content-container {
+        display: inline-flex;
+        overflow: hidden;
+        gap: var(--g-spacing-1);
+
+        .g-help-mark__button {
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
     &__row-cell {
         display: table-cell;
         overflow-x: hidden;

src/components/PaginatedTable/TableHead.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import type {HelpMarkProps} from '@gravity-ui/uikit';
+import {HelpMark} from '@gravity-ui/uikit';
+
 import {ResizeHandler} from './ResizeHandler';
 import {
     ASCENDING,
@@ -9,7 +12,14 @@ import {
     DESCENDING,
 } from './constants';
 import {b} from './shared';
-import type {Column, HandleTableColumnsResize, OnSort, SortOrderType, SortParams} from './types';
+import type {
+    AlignType,
+    Column,
+    HandleTableColumnsResize,
+    OnSort,
+    SortOrderType,
+    SortParams,
+} from './types';
 
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({order}: {order?: SortOrderType}) => {
@@ -43,6 +53,12 @@ const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconP
     }
 };
 
+const columnAlignToHelpMarkPlacement: Record<AlignType, HelpMarkProps['placement']> = {
+    left: 'right',
+    right: 'left',
+    center: 'right',
+};
+
 interface TableHeadCellProps<T> {
     column: Column<T>;
     resizeable?: boolean;
@@ -115,7 +131,17 @@ export const TableHeadCell = <T,>({
                     }
                 }}
             >
-                <div className={b('head-cell-content')}>{content}</div>
+                <div className={b('head-cell-content-container')}>
+                    <div className={b('head-cell-content')}>{content}</div>
+                    {column.note && (
+                        <HelpMark
+                            placement={columnAlignToHelpMarkPlacement[column.align]}
+                            className={b('head-cell-note')}
+                        >
+                            {column.note}
+                        </HelpMark>
+                    )}
+                </div>
                 <ColumnSortIcon
                     sortOrder={sortOrder}
                     sortable={column.sortable}

src/components/PaginatedTable/types.ts

@@ -25,6 +25,7 @@ export type HandleTableColumnsResize = (columnId: string, width: number) => void
 
 export interface Column<T> {
     name: string;
+    note?: string;
     header?: React.ReactNode;
     className?: string;
     sortable?: boolean;