@evergis/react 4.0.143 → 4.0.144

package/dist/react.esm.js

@@ -11405,10 +11405,17 @@ const toSchemaAttribute = (params) => {
         attributeName,
         // Тип принадлежит источнику: конфиг задаёт его только там, где источника нет.
         type: source?.type ?? description?.type ?? DEFAULT_ATTRIBUTE_TYPE,
+        // Уточнение типа — целиком за конфигом: у атрибута источника поля `subType` нет.
+        subType: description?.subType,
         alias: description?.alias ?? source?.alias ?? attributeName,
         description: description?.description ?? source?.description,
         isEditable: resolveIsEditable(params),
         stringFormat: resolveStringFormat(description, source),
+        // Раскладка колонки живёт только в конфиге контейнера: источник о ширине таблицы не знает.
+        width: description?.width,
+        resizable: description?.resizable,
+        multiline: description?.multiline,
+        style: description?.style,
     };
 };
 /**
@@ -15439,6 +15446,8 @@ const TIME_FORMAT = /hh:mm/;
  * закрытие редактора по клику снаружи обязано этот контейнер пропускать.
  */
 const PORTAL_ROOT_SELECTOR = "#portal-root";
+/** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
+const MIN_COLUMN_WIDTH = 48;
 
 /**
  * Собственный бокс таблицы. Без размеров в `options` представления узел ничего не меняет:
@@ -15495,10 +15504,13 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
   z-index: 1;
 `;
 const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
+  /* Относительное позиционирование держит захват границы колонки (TableResizeHandle). */
+  position: relative;
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
   color: ${({ theme }) => theme.palette.textSecondary};
   /* Рамка принадлежит ячейке (рамки раздельные), поэтому едет вместе с липкой шапкой. */
   border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
@@ -15509,10 +15521,37 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
       user-select: none;
     `}
 `;
+/**
+ * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
+ * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
+ */
 const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-8hzcop" }) `
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/**
+ * Захват правой границы колонки. Лежит поверх края ячейки и ловит указатель сам, поэтому
+ * перетаскивание не доходит до заголовка и не переключает сортировку.
+ *
+ * Ширина в пикселах, а не в rem: это зона попадания курсора, и от размера шрифта она не зависит.
+ */
+const TableResizeHandle = styled.span.withConfig({ displayName: "TableResizeHandle", componentId: "sc-1g0q105" }) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+
+  :hover {
+    background: ${({ theme }) => theme.palette.elementDeep};
+  }
 `;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
@@ -15520,7 +15559,7 @@ const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent
  * клик по заголовку, вместе с телом. Оба направления рисуются значком в 1rem, поэтому
  * переключение asc/des ширину тоже не трогает.
  */
-const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", componentId: "sc-z378vf" }) `
+const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", componentId: "sc-1ceykgw" }) `
   display: inline-flex;
   visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
 `;
@@ -15529,36 +15568,54 @@ const TableSortSlot = styled.span.withConfig({ displayName: "TableSortSlot", com
  * её нижнюю кромку и сквозь прозрачную шапку не проступают. Величину пишет {@link useHeadOverlap},
  * без неё отсечка нулевая и разметка не меняется.
  */
-const TableBody = styled.tbody.withConfig({ displayName: "TableBody", componentId: "sc-1pxpl5v" }) `
+const TableBody = styled.tbody.withConfig({ displayName: "TableBody", componentId: "sc-c9drzt" }) `
   clip-path: inset(var(${HEAD_OVERLAP_VARIABLE}, 0px) 0 0 0);
 `;
 /**
  * Строка. Разделитель рисуют её ячейки: собственная рамка строки при раздельных рамках не
  * рисуется вовсе, а при схлопнутых её рисовала бы таблица — и отсечка тела её бы не резала.
  */
-const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-j62zvd" }) `
+const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "sc-155nkv8" }) `
   td {
     border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
   }
 `;
-const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-ziu5rk" }) `
+const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-7ueth1" }) `
   padding: 0.125rem 0.25rem;
   vertical-align: middle;
   /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
   max-width: var(--table-cell-max-width, 20rem);
 `;
 /** Колонка действий: узкая, не растягивается содержимым. */
-const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-18w13t3" }) `
+const TableActionsCell = styled(TableCellWrapper).withConfig({ displayName: "TableActionsCell", componentId: "sc-1m7p53b" }) `
   width: 2rem;
   text-align: right;
 `;
-const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-ok630s" }) `
+/**
+ * Как значение ведёт себя, когда не помещается в колонку: режется многоточием в одну строку
+ * или переносится по словам, растягивая строку таблицы вниз (`multiline` атрибута).
+ *
+ * Перенос разрешаем и посреди слова: колонка бывает уже одного длинного слова (ссылка, артикул),
+ * и без этого оно вылезло бы за заданную ширину, сделав её бессмысленной.
+ */
+const cellWrapMixin = css `
+  ${({ $multiline }) => $multiline
+    ? css `
+          white-space: normal;
+          overflow-wrap: anywhere;
+        `
+    : css `
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `}
+`;
+const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "sc-19uakee" }) `
   padding: 0.375rem 0.25rem;
   /* Та же высота строки, что у редактора — иначе строка подпрыгивала бы по вертикали. */
   line-height: 1.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  ${cellWrapMixin};
 `;
 /**
  * Редактируемая ячейка вне фокуса. Показывает значение по `stringFormat`, а редактор
@@ -15567,7 +15624,7 @@ const CellText = styled.div.withConfig({ displayName: "CellText", componentId: "
  * Кнопка, а не просто текст, именно ради фокуса: она — таб-стоп ячейки, и Tab по таблице
  * открывает редактор с курсором внутри.
  */
-const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-98k9cz" }) `
+const CellButton = styled.button.withConfig({ displayName: "CellButton", componentId: "sc-16lgve4" }) `
   width: 100%;
   padding: 0.375rem 0.25rem;
   line-height: 1.25rem;
@@ -15578,15 +15635,14 @@ const CellButton = styled.button.withConfig({ displayName: "CellButton", compone
   color: inherit;
   text-align: left;
   cursor: text;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  ${cellWrapMixin};
 
   :hover {
     border-color: ${({ theme }) => theme.palette.elementDeep};
   }
 `;
-const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-7tff41" }) `
+const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder", componentId: "sc-1jnsjad" }) `
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 /**
@@ -15595,20 +15651,21 @@ const CellPlaceholder = styled.span.withConfig({ displayName: "CellPlaceholder",
  * Копия остаётся в потоке и держит ширину колонки ровно такой, какой она была до клика, —
  * иначе таблица дёргалась бы на каждый вход в правку и выход из неё.
  */
-const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-qa22du" }) `
+const CellEditor = styled.div.withConfig({ displayName: "CellEditor", componentId: "sc-ee08kh" }) `
   position: relative;
   min-height: 2rem;
 `;
-const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-1i1yvb2" }) `
+const CellGhost = styled.span.withConfig({ displayName: "CellGhost", componentId: "sc-1p10qm6" }) `
   display: block;
   padding: 0.375rem 0.25rem;
   /* Рамка повторяет CellButton — с ней высота ячейки в правке совпадает с высотой на чтении. */
   border: 1px solid transparent;
   line-height: 1.25rem;
-  white-space: nowrap;
   visibility: hidden;
+
+  ${cellWrapMixin};
 `;
-const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-1ww3875" }) `
+const CellField = styled.div.withConfig({ displayName: "CellField", componentId: "sc-cnkcp6" }) `
   position: absolute;
   inset: 0;
   display: flex;
@@ -15623,11 +15680,97 @@ const CellField = styled.div.withConfig({ displayName: "CellField", componentId:
     min-width: 0;
   }
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-1vamijg" }) `
+/**
+ * Ячейка со вложениями. Список идёт колонкой, кнопка добавления — под ним, поэтому строка растёт
+ * ровно на столько, сколько файлов в ней лежит.
+ *
+ * Отступы те же, что у текстовой ячейки (`CellText`): в одном ряду с обычными колонками значения
+ * обязаны стоять на одной линии.
+ */
+const AttachmentsCellBox = styled.div.withConfig({ displayName: "AttachmentsCellBox", componentId: "sc-9n5afp" }) `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  padding: 0.375rem 0.25rem;
+`;
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-1c196zb" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
 
+/**
+ * Ячейка с вложениями: разбор значения, просмотр, скачивание и правка списка.
+ *
+ * Значение атрибута — строка: файлы приезжают в ней списком JSON, поэтому и обратно в черновик
+ * кладём строку, а не массив — иначе тип ячейки менялся бы от самой правки.
+ *
+ * Добавление здесь только по ссылке. Загрузка с диска требует ресурса-родителя и файлового
+ * api контейнера вложений, а у колонки таблицы ни того, ни другого нет.
+ */
+const useAttachmentsCell = ({ attribute, row, canEdit, onChange }) => {
+    const [previewIndex, setPreviewIndex] = useState(null);
+    const [isLinkDialogOpen, setLinkDialogOpen] = useState(false);
+    const { attributeName, isEditable } = attribute;
+    const value = row.properties[attributeName];
+    const items = useMemo(() => parseAttachments(value), [value]);
+    const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
+    const downloadByIndex = useAttachmentDownload(items);
+    // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
+    const editable = canEdit && isEditable;
+    const persist = useCallback((next) => onChange(row.key, attributeName, JSON.stringify(next)), [attributeName, onChange, row.key]);
+    const onPreview = useCallback((link) => {
+        const index = items.findIndex(item => item.link === link);
+        if (index >= 0) {
+            setPreviewIndex(index);
+        }
+    }, [items]);
+    const onClosePreview = useCallback(() => setPreviewIndex(null), []);
+    const onDownload = useCallback((_image, index) => downloadByIndex(index), [downloadByIndex]);
+    const onDelete = useCallback((link) => persist(items.filter(item => item.link !== link)), [items, persist]);
+    const onOpenLinkDialog = useCallback(() => setLinkDialogOpen(true), []);
+    const onCloseLinkDialog = useCallback(() => setLinkDialogOpen(false), []);
+    const onAddByLink = useCallback((url) => persist([
+        ...items,
+        {
+            link: url,
+            name: getFileNameFromUrl(url),
+            mimeType: getMimeTypeFromUrl(url),
+            date: new Date().toISOString(),
+            isExternal: true,
+        },
+    ]), [items, persist]);
+    return {
+        items,
+        editable,
+        previewIndex,
+        previewImages,
+        isLinkDialogOpen,
+        onPreview,
+        onClosePreview,
+        onDownload,
+        onDelete,
+        onOpenLinkDialog,
+        onCloseLinkDialog,
+        onAddByLink,
+    };
+};
+
+/**
+ * Колонка со вложениями: список файлов прямо в ячейке.
+ *
+ * Тип у атрибута строковый, вложениями его делает `subType: "Attachments"` в схеме контейнера —
+ * поэтому ветка стоит раньше разбора типа и обычных редакторов ячейки.
+ */
+const AttachmentsCell = memo(({ attribute, row, canEdit, onChange }) => {
+    const { t } = useGlobalContext();
+    const { items, editable, previewIndex, previewImages, isLinkDialogOpen, onPreview, onClosePreview, onDownload, onDelete, onOpenLinkDialog, onCloseLinkDialog, onAddByLink, } = useAttachmentsCell({ attribute, row, canEdit, onChange });
+    return (jsxs(AttachmentsCellBox, { children: [!items.length && !editable && jsx(CellPlaceholder, { children: "\u2014" }), jsx(AttachmentsList, { items: items, isEdit: editable, onPreview: onPreview, onDelete: onDelete }), editable && (jsx(IconButton, { kind: "link", tabIndex: 0, title: t("attachments.fromLink", { ns: "common", defaultValue: "По ссылке" }), onClick: onOpenLinkDialog })), jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: onCloseLinkDialog, onSubmit: onAddByLink }), previewIndex !== null && (jsx(Preview, { images: previewImages, initialIndex: previewIndex, isOpen: true, onClose: onClosePreview, onDownload: onDownload, errorTitleText: t("attachments.resourceUnavailable", {
+                    ns: "common",
+                    defaultValue: "Ресурс недоступен",
+                }) }, previewIndex))] }));
+});
+
 /**
  * Значение ячейки не изменилось.
  *
@@ -15726,7 +15869,7 @@ const useCellEditing = () => {
 const TableCell = memo(({ attribute, row, canEdit, onChange }) => {
     const { t, language } = useGlobalContext();
     const { editing, buttonProps, editorProps } = useCellEditing();
-    const { attributeName, type, isEditable, stringFormat } = attribute;
+    const { attributeName, type, subType, isEditable, stringFormat, multiline } = attribute;
     const value = row.properties[attributeName];
     const handleChange = useCallback((next) => {
         // Пустые правки отбрасываем: иначе строка становилась бы «изменённой» от простого
@@ -15745,16 +15888,21 @@ const TableCell = memo(({ attribute, row, canEdit, onChange }) => {
     const withTime = useMemo(() => TIME_FORMAT.test(stringFormat?.format ?? ""), [stringFormat?.format]);
     // `canEdit` — режим таблицы, `isEditable` — разрешение конкретного атрибута: правка требует обоих.
     const editable = canEdit && isEditable && EDITABLE_ATTRIBUTE_TYPES.includes(type);
+    // Вложения — это строка с JSON, а не текст: разбирать и рисовать её нужно раньше любых
+    // редакторов по типу, иначе в ячейке оказался бы сырой список файлов.
+    if (subType === StringSubType.Attachments) {
+        return jsx(AttachmentsCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
+    }
     // Логическое значение и на чтение показываем галкой, а не словами «true»/«false» —
     // так же, как остальной дашборд рисует булевы атрибуты.
     if (type === AttributeType.Boolean) {
         return jsx(Checkbox, { checked: !!value, disabled: !editable, onChange: () => handleChange(!value) });
     }
     if (!editable) {
-        return jsx(CellText, { title: formatted, children: formatted || jsx(CellPlaceholder, { children: "\u2014" }) });
+        return (jsx(CellText, { "$multiline": multiline, title: formatted, children: formatted || jsx(CellPlaceholder, { children: "\u2014" }) }));
     }
     if (!editing) {
-        return (jsx(CellButton, { type: "button", ...buttonProps, children: formatted || jsx(CellPlaceholder, { children: "\u2014" }) }));
+        return (jsx(CellButton, { type: "button", "$multiline": multiline, ...buttonProps, children: formatted || jsx(CellPlaceholder, { children: "\u2014" }) }));
     }
     const renderEditor = () => {
         if (type === AttributeType.DateTime) {
@@ -15765,9 +15913,31 @@ const TableCell = memo(({ attribute, row, canEdit, onChange }) => {
         }
         return (jsx(Input, { autoFocus: true, value: value === null || value === undefined ? "" : String(value), width: "100%", onChange: ({ target }) => handleChange(target.value) }));
     };
-    return (jsxs(CellEditor, { ...editorProps, children: [jsx(CellGhost, { children: formatted || "—" }), jsx(CellField, { children: renderEditor() })] }));
+    return (jsxs(CellEditor, { ...editorProps, children: [jsx(CellGhost, { "$multiline": multiline, children: formatted || "—" }), jsx(CellField, { children: renderEditor() })] }));
 });
 
+/**
+ * Инлайн-размер ячейки колонки с заданной шириной.
+ *
+ * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
+ * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
+ * втроём, на каждую ячейку колонки.
+ *
+ * Ширины нет — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ */
+const getColumnStyle = (width) => width == null ? undefined : { width, minWidth: width, maxWidth: width };
+
+/**
+ * Шапка таблицы: заголовки колонок, сортировка кликом и захват границы для ручной ширины.
+ *
+ * Захват рисуется по разрешению атрибута (`resizable`) и не смотрит на режим правки контейнера:
+ * ширина колонки — это вид, а не данные.
+ */
+const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onResizeStart, onResizeMove, onResizeEnd, }) => (jsxs("tr", { children: [columns.map(({ attributeName, alias, description, resizable }) => {
+            const sorted = sort?.attributeName === attributeName;
+            return (jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(columnWidths[attributeName]), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && (jsx(TableResizeHandle, { onPointerDown: event => onResizeStart(attributeName, event), onPointerMove: onResizeMove, onPointerUp: onResizeEnd, onPointerCancel: onResizeEnd }))] }, attributeName));
+        }), withActionsColumn && jsx(TableHeadCell, {})] }));
+
 const ContainerLoading = () => (jsx(Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsx(CircularProgress, { diameter: 1.5, mono: true }) }));
 
 /**
@@ -15871,6 +16041,53 @@ const getTableBoxStyle = (width, height) => {
     };
 };
 
+/**
+ * Ручное изменение ширины колонок.
+ *
+ * Растянутые ширины живут только здесь: тянут их в рантайме, а `width` атрибута в конфиге задаёт
+ * лишь стартовое значение — записывать растянутое обратно в конфиг незачем.
+ *
+ * Разрешение (`resizable`) от `options.editMode` не зависит: ширина колонки — это вид таблицы,
+ * а не правка данных, и тянуть её должно быть можно и на таблице только для чтения.
+ *
+ * Стартовую ширину берём с самой ячейки, а не из конфига: у колонки без `width` её выбрала
+ * раскладка таблицы, и тянуть надо ровно от того, что видно.
+ */
+const useColumnResize = (columns) => {
+    const [widths, setWidths] = useState({});
+    const dragRef = useRef(null);
+    const onResizeStart = useCallback((attributeName, event) => {
+        const handle = event.currentTarget;
+        // Захват границы — не клик по заголовку: иначе каждое перетаскивание переключало бы сортировку.
+        event.preventDefault();
+        event.stopPropagation();
+        dragRef.current = {
+            attributeName,
+            startX: event.clientX,
+            startWidth: handle.closest("th")?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH,
+        };
+        handle.setPointerCapture(event.pointerId);
+    }, []);
+    const onResizeMove = useCallback((event) => {
+        const drag = dragRef.current;
+        if (!drag) {
+            return;
+        }
+        const next = Math.max(MIN_COLUMN_WIDTH, Math.round(drag.startWidth + event.clientX - drag.startX));
+        setWidths(current => current[drag.attributeName] === next ? current : { ...current, [drag.attributeName]: next });
+    }, []);
+    const onResizeEnd = useCallback((event) => {
+        const handle = event.currentTarget;
+        dragRef.current = null;
+        if (handle.hasPointerCapture(event.pointerId)) {
+            handle.releasePointerCapture(event.pointerId);
+        }
+    }, []);
+    // Растянутая ширина перебивает конфигурационную: последнее слово за тем, кто тянул.
+    const columnWidths = useMemo(() => columns.reduce((acc, { attributeName, width }) => ({ ...acc, [attributeName]: widths[attributeName] ?? width }), {}), [columns, widths]);
+    return { columnWidths, onResizeStart, onResizeMove, onResizeEnd };
+};
+
 /**
  * Вид таблицы: колонки плюс локальная сортировка.
  *
@@ -15883,6 +16100,9 @@ const getTableBoxStyle = (width, height) => {
  *
  * `width`/`height` — размер собственного бокса таблицы: он ограничивает её саму и прокручивает
  * то, что не влезло. Место, отведённое контейнеру, задаётся его же опциями и живёт отдельно.
+ *
+ * Ширины колонок — тоже вид: конфиг задаёт стартовую, растянутая мышью живёт в
+ * {@link useColumnResize} и в конфиг не возвращается.
  */
 const useTableView = (elementConfig) => {
     const context = useContext(StructuredDataContext);
@@ -15893,6 +16113,7 @@ const useTableView = (elementConfig) => {
     const columns = useMemo(() => schema ?? [], [schema]);
     const sortedRows = useMemo(() => sortRows(rows ?? [], sort, schema ?? []), [rows, schema, sort]);
     const sizeCss = useMemo(() => getTableBoxStyle(width, height), [height, width]);
+    const { columnWidths, onResizeStart, onResizeMove, onResizeEnd } = useColumnResize(columns);
     const onSortToggle = useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
     return {
         context,
@@ -15903,7 +16124,11 @@ const useTableView = (elementConfig) => {
         sizeCss,
         // Ширина задана — колонки по содержимому: лишнее уходит в прокрутку бокса, а не в многоточие.
         contentWidth: width != null,
+        columnWidths,
         onSortToggle,
+        onResizeStart,
+        onResizeMove,
+        onResizeEnd,
     };
 };
 
@@ -15915,7 +16140,7 @@ const useTableView = (elementConfig) => {
  */
 const ElementTable = memo(({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, onSortToggle } = useTableView(elementConfig);
+    const { context, columns, rows, sort, sortEnabled, sizeCss, contentWidth, columnWidths, onSortToggle, onResizeStart, onResizeMove, onResizeEnd, } = useTableView(elementConfig);
     // Узел таблицы держим состоянием, а не ref: отсечка должна встать сразу, как он появится.
     const [table, setTable] = useState(null);
     useHeadOverlap(table);
@@ -15931,10 +16156,10 @@ const ElementTable = memo(({ elementConfig }) => {
                 defaultValue: "Схема данных не задана",
             }) }));
     }
-    return (jsx(TableBox, { "$sizeCss": sizeCss, children: jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsx(TableHead, { children: jsxs("tr", { children: [columns.map(({ attributeName, alias, description }) => {
-                                const sorted = sort?.attributeName === attributeName;
-                                return (jsx(TableHeadCell, { title: description || alias, "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }) }, attributeName));
-                            }), context.canDelete && jsx(TableHeadCell, {})] }) }), jsx(TableBody, { children: rows.map(row => (jsxs(TableRow, { children: [columns.map(attribute => (jsx(TableCellWrapper, { children: jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+    return (jsx(TableBox, { "$sizeCss": sizeCss, children: jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsx(TableHead, { children: jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onResizeStart: onResizeStart, onResizeMove: onResizeMove, onResizeEnd: onResizeEnd }) }), jsx(TableBody, { children: rows.map(row => (jsxs(TableRow, { children: [columns.map(attribute => (jsx(TableCellWrapper, { 
+                                // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
+                                // он не трогает — своих размеров у него нет.
+                                style: { ...getColumnStyle(columnWidths[attribute.attributeName]), ...attribute.style }, children: jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `