@cloud-ru/uikit-product-mobile-table 0.12.0 → 0.13.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.13.1 (2025-11-24)
+
+
+### Bug Fixes
+
+* **FF-7578:** fix status column ([a1314f5](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/a1314f5c6017dc3ab34aa63067031ab466e7d7dc))
+
+
+
+
+
+# 0.13.0 (2025-11-23)
+
+
+### Features
+
+* **FF-7560:** add status column support to mobile table ([2589830](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/2589830b331efbc93ca22cbf91009a1e1be0745f))
+
+
+
+
+
 # 0.12.0 (2025-11-21)
 
 

package/dist/cjs/components/AdaptiveTable/AdaptiveTable.d.ts

@@ -5,4 +5,5 @@ import { MobileTableProps } from '../MobileTable';
 export type AdaptiveTableProps<TData extends object, TFilters extends FiltersState> = TableProps<TData, TFilters> & MobileTableProps<TData, TFilters>;
 export declare function AdaptiveTable<TState extends object, TFilters extends FiltersState>({ layoutType, ...props }: WithLayoutType<AdaptiveTableProps<TState, TFilters>>): import("react/jsx-runtime").JSX.Element;
 export declare const useAdaptiveGetRowActionsColumnDef: ({ layoutType }: WithLayoutType) => typeof DesktopTable.getRowActionsColumnDef;
-export type { TableProps, ColumnDefinition, CellContext };
+export declare const useAdaptiveGetStatusColumnDef: ({ layoutType }: WithLayoutType) => typeof DesktopTable.getStatusColumnDef;
+export type { CellContext, ColumnDefinition, TableProps };

package/dist/cjs/components/AdaptiveTable/AdaptiveTable.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAdaptiveGetRowActionsColumnDef = void 0;
+exports.useAdaptiveGetStatusColumnDef = exports.useAdaptiveGetRowActionsColumnDef = void 0;
 exports.AdaptiveTable = AdaptiveTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const table_1 = require("@snack-uikit/table");
@@ -26,3 +26,8 @@ const useAdaptiveGetRowActionsColumnDef = ({ layoutType }) => {
     return (isMobile ? MobileTable_1.MobileTable.getRowActionsColumnDef : table_1.Table.getRowActionsColumnDef);
 };
 exports.useAdaptiveGetRowActionsColumnDef = useAdaptiveGetRowActionsColumnDef;
+const useAdaptiveGetStatusColumnDef = ({ layoutType }) => {
+    const isMobile = layoutType === 'mobile';
+    return (isMobile ? MobileTable_1.MobileTable.getStatusColumnDef : table_1.Table.getStatusColumnDef);
+};
+exports.useAdaptiveGetStatusColumnDef = useAdaptiveGetStatusColumnDef;

package/dist/cjs/components/MobileTable.d.ts

@@ -9,4 +9,5 @@ export type MobileTableProps<TData extends object, TFilters extends FiltersState
 export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MobileTable {
     var getRowActionsColumnDef: typeof import("../helperComponents").getRowActionsColumnDef;
+    var getStatusColumnDef: typeof import("../helperComponents").getStatusColumnDef;
 }

package/dist/cjs/components/MobileTable.js

@@ -114,3 +114,4 @@ function MobileTable(_a) {
                         }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;
+MobileTable.getStatusColumnDef = helperComponents_1.getStatusColumnDef;

package/dist/cjs/helperComponents/StatusColumnDef/StatusColumnDef.d.ts

@@ -0,0 +1,29 @@
+import { HeaderContext } from '@tanstack/react-table';
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { StatusProps } from '@snack-uikit/status';
+import { MobileTableProps } from '../../components';
+export type StatusAppearance = StatusProps['appearance'];
+export type StatusColumnDefProps<TData extends object> = {
+    /** Ключ для доступа к значению статуса в данных */
+    accessorKey: keyof TData;
+    /** Маппинг значений статусов на appearance */
+    mapStatusToAppearance: (value: string | number) => StatusAppearance;
+    /** Заголовок колонки */
+    header?: string | ((ctx: HeaderContext<TData, unknown>) => React.ReactNode);
+    /** Функция для рендеринга описания статуса (опционально) */
+    renderDescription?: (value: string) => string;
+    /** Размер колонки */
+    size?: number;
+    /** Минимальный размер колонки */
+    minSize?: number;
+    /** Максимальный размер колонки */
+    maxSize?: number;
+    /** Закрепление колонки */
+    pinned?: 'left' | 'right';
+    /** Включить сортировку */
+    enableSorting?: boolean;
+    /** Включить изменение размера */
+    enableResizing?: boolean;
+};
+/** Вспомогательная функция для создания колонки со статусами */
+export declare function getStatusColumnDef<TData extends object, TFilters extends FiltersState>({ accessorKey, mapStatusToAppearance, header, renderDescription, size, minSize, maxSize, pinned, enableSorting, enableResizing, }: StatusColumnDefProps<TData>): MobileTableProps<TData, TFilters>['columnDefinitions'][0];

package/dist/cjs/helperComponents/StatusColumnDef/StatusColumnDef.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatusColumnDef = getStatusColumnDef;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const status_1 = require("@snack-uikit/status");
+const constants_1 = require("../../constants");
+/** Вспомогательная функция для создания колонки со статусами */
+function getStatusColumnDef({ accessorKey, mapStatusToAppearance, header = 'Статус', renderDescription, size = 150, minSize, maxSize, pinned, enableSorting = true, enableResizing = true, }) {
+    return {
+        id: String(accessorKey),
+        accessorKey: String(accessorKey),
+        header,
+        size,
+        minSize,
+        maxSize,
+        pinned,
+        enableSorting,
+        enableResizing,
+        cell: (cell) => {
+            const statusValue = cell.getValue();
+            if (!statusValue)
+                return null;
+            const appearance = mapStatusToAppearance(statusValue) || 'neutral';
+            const label = renderDescription ? renderDescription(statusValue) : statusValue;
+            return ((0, jsx_runtime_1.jsx)(status_1.Status, { label: label, appearance: appearance, size: 's', hasBackground: true, "data-test-id": constants_1.TEST_IDS.statusLabel }));
+        },
+    };
+}

package/dist/cjs/helperComponents/StatusColumnDef/index.d.ts

@@ -0,0 +1 @@
+export * from './StatusColumnDef';

package/dist/cjs/helperComponents/StatusColumnDef/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./StatusColumnDef"), exports);

package/dist/cjs/helperComponents/index.d.ts

@@ -1,4 +1,5 @@
 export * from './RowActionsCell';
+export * from './StatusColumnDef';
 export * from './TableCard';
 export * from './TablePagination';
 export * from './TableEmptyState';

package/dist/cjs/helperComponents/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./RowActionsCell"), exports);
+__exportStar(require("./StatusColumnDef"), exports);
 __exportStar(require("./TableCard"), exports);
 __exportStar(require("./TablePagination"), exports);
 __exportStar(require("./TableEmptyState"), exports);

package/dist/esm/components/AdaptiveTable/AdaptiveTable.d.ts

@@ -5,4 +5,5 @@ import { MobileTableProps } from '../MobileTable';
 export type AdaptiveTableProps<TData extends object, TFilters extends FiltersState> = TableProps<TData, TFilters> & MobileTableProps<TData, TFilters>;
 export declare function AdaptiveTable<TState extends object, TFilters extends FiltersState>({ layoutType, ...props }: WithLayoutType<AdaptiveTableProps<TState, TFilters>>): import("react/jsx-runtime").JSX.Element;
 export declare const useAdaptiveGetRowActionsColumnDef: ({ layoutType }: WithLayoutType) => typeof DesktopTable.getRowActionsColumnDef;
-export type { TableProps, ColumnDefinition, CellContext };
+export declare const useAdaptiveGetStatusColumnDef: ({ layoutType }: WithLayoutType) => typeof DesktopTable.getStatusColumnDef;
+export type { CellContext, ColumnDefinition, TableProps };

package/dist/esm/components/AdaptiveTable/AdaptiveTable.js

@@ -21,3 +21,7 @@ export const useAdaptiveGetRowActionsColumnDef = ({ layoutType }) => {
     const isMobile = layoutType === 'mobile';
     return (isMobile ? MobileTable.getRowActionsColumnDef : DesktopTable.getRowActionsColumnDef);
 };
+export const useAdaptiveGetStatusColumnDef = ({ layoutType }) => {
+    const isMobile = layoutType === 'mobile';
+    return (isMobile ? MobileTable.getStatusColumnDef : DesktopTable.getStatusColumnDef);
+};

package/dist/esm/components/MobileTable.d.ts

@@ -9,4 +9,5 @@ export type MobileTableProps<TData extends object, TFilters extends FiltersState
 export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace MobileTable {
     var getRowActionsColumnDef: typeof import("../helperComponents").getRowActionsColumnDef;
+    var getStatusColumnDef: typeof import("../helperComponents").getStatusColumnDef;
 }

package/dist/esm/components/MobileTable.js

@@ -17,7 +17,7 @@ import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { MobileToolbar } from '@cloud-ru/uikit-product-mobile-toolbar';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { getRowActionsColumnDef, TableCard, TableEmptyState, TablePagination, useEmptyState, } from '../helperComponents';
+import { getRowActionsColumnDef, getStatusColumnDef, TableCard, TableEmptyState, TablePagination, useEmptyState, } from '../helperComponents';
 import { DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.css';
@@ -108,3 +108,4 @@ export function MobileTable(_a) {
                         }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;
+MobileTable.getStatusColumnDef = getStatusColumnDef;

package/dist/esm/helperComponents/StatusColumnDef/StatusColumnDef.d.ts

@@ -0,0 +1,29 @@
+import { HeaderContext } from '@tanstack/react-table';
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { StatusProps } from '@snack-uikit/status';
+import { MobileTableProps } from '../../components';
+export type StatusAppearance = StatusProps['appearance'];
+export type StatusColumnDefProps<TData extends object> = {
+    /** Ключ для доступа к значению статуса в данных */
+    accessorKey: keyof TData;
+    /** Маппинг значений статусов на appearance */
+    mapStatusToAppearance: (value: string | number) => StatusAppearance;
+    /** Заголовок колонки */
+    header?: string | ((ctx: HeaderContext<TData, unknown>) => React.ReactNode);
+    /** Функция для рендеринга описания статуса (опционально) */
+    renderDescription?: (value: string) => string;
+    /** Размер колонки */
+    size?: number;
+    /** Минимальный размер колонки */
+    minSize?: number;
+    /** Максимальный размер колонки */
+    maxSize?: number;
+    /** Закрепление колонки */
+    pinned?: 'left' | 'right';
+    /** Включить сортировку */
+    enableSorting?: boolean;
+    /** Включить изменение размера */
+    enableResizing?: boolean;
+};
+/** Вспомогательная функция для создания колонки со статусами */
+export declare function getStatusColumnDef<TData extends object, TFilters extends FiltersState>({ accessorKey, mapStatusToAppearance, header, renderDescription, size, minSize, maxSize, pinned, enableSorting, enableResizing, }: StatusColumnDefProps<TData>): MobileTableProps<TData, TFilters>['columnDefinitions'][0];

package/dist/esm/helperComponents/StatusColumnDef/StatusColumnDef.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from '@snack-uikit/status';
+import { TEST_IDS } from '../../constants';
+/** Вспомогательная функция для создания колонки со статусами */
+export function getStatusColumnDef({ accessorKey, mapStatusToAppearance, header = 'Статус', renderDescription, size = 150, minSize, maxSize, pinned, enableSorting = true, enableResizing = true, }) {
+    return {
+        id: String(accessorKey),
+        accessorKey: String(accessorKey),
+        header,
+        size,
+        minSize,
+        maxSize,
+        pinned,
+        enableSorting,
+        enableResizing,
+        cell: (cell) => {
+            const statusValue = cell.getValue();
+            if (!statusValue)
+                return null;
+            const appearance = mapStatusToAppearance(statusValue) || 'neutral';
+            const label = renderDescription ? renderDescription(statusValue) : statusValue;
+            return (_jsx(Status, { label: label, appearance: appearance, size: 's', hasBackground: true, "data-test-id": TEST_IDS.statusLabel }));
+        },
+    };
+}

package/dist/esm/helperComponents/StatusColumnDef/index.d.ts

@@ -0,0 +1 @@
+export * from './StatusColumnDef';

package/dist/esm/helperComponents/StatusColumnDef/index.js

@@ -0,0 +1 @@
+export * from './StatusColumnDef';

package/dist/esm/helperComponents/index.d.ts

@@ -1,4 +1,5 @@
 export * from './RowActionsCell';
+export * from './StatusColumnDef';
 export * from './TableCard';
 export * from './TablePagination';
 export * from './TableEmptyState';

package/dist/esm/helperComponents/index.js

@@ -1,4 +1,5 @@
 export * from './RowActionsCell';
+export * from './StatusColumnDef';
 export * from './TableCard';
 export * from './TablePagination';
 export * from './TableEmptyState';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-table",
   "title": "Mobile Table",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,14 +37,15 @@
   "scripts": {},
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "15.1.4",
-    "@cloud-ru/uikit-product-mobile-chips": "0.8.39",
+    "@cloud-ru/uikit-product-mobile-chips": "0.8.40",
     "@cloud-ru/uikit-product-mobile-dropdown": "0.9.24",
-    "@cloud-ru/uikit-product-mobile-toolbar": "0.4.6",
+    "@cloud-ru/uikit-product-mobile-toolbar": "0.4.7",
     "@cloud-ru/uikit-product-utils": "7.0.3",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/info-block": "0.6.31",
     "@snack-uikit/pagination": "0.10.18",
     "@snack-uikit/skeleton": "0.6.8",
+    "@snack-uikit/status": "0.10.0",
     "@snack-uikit/table": "0.37.16",
     "@snack-uikit/toggles": "0.13.20",
     "@tanstack/match-sorter-utils": "8.19.4",
@@ -59,5 +60,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9"
   },
-  "gitHead": "06337f66813c3cfb10b4bf2adfa14d4cdf24a805"
+  "gitHead": "cc31bd43bfbff65cd3db647895681383453d7d37"
 }

package/src/components/AdaptiveTable/AdaptiveTable.tsx

@@ -23,4 +23,12 @@ export const useAdaptiveGetRowActionsColumnDef = ({ layoutType }: WithLayoutType
   ) as typeof DesktopTable.getRowActionsColumnDef;
 };
 
-export type { TableProps, ColumnDefinition, CellContext };
+export const useAdaptiveGetStatusColumnDef = ({ layoutType }: WithLayoutType) => {
+  const isMobile = layoutType === 'mobile';
+
+  return (
+    isMobile ? MobileTable.getStatusColumnDef : DesktopTable.getStatusColumnDef
+  ) as typeof DesktopTable.getStatusColumnDef;
+};
+
+export type { CellContext, ColumnDefinition, TableProps };

package/src/components/MobileTable.tsx

@@ -20,6 +20,7 @@ import { PaginationState, TableProps } from '@snack-uikit/table';
 
 import {
   getRowActionsColumnDef,
+  getStatusColumnDef,
   TableCard,
   TableEmptyState,
   TablePagination,
@@ -270,3 +271,4 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
 }
 
 MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;
+MobileTable.getStatusColumnDef = getStatusColumnDef;

package/src/helperComponents/StatusColumnDef/StatusColumnDef.tsx

@@ -0,0 +1,69 @@
+import { CellContext, HeaderContext } from '@tanstack/react-table';
+
+import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
+import { Status, StatusProps } from '@snack-uikit/status';
+
+import { MobileTableProps } from '../../components';
+import { TEST_IDS } from '../../constants';
+
+export type StatusAppearance = StatusProps['appearance'];
+
+export type StatusColumnDefProps<TData extends object> = {
+  /** Ключ для доступа к значению статуса в данных */
+  accessorKey: keyof TData;
+  /** Маппинг значений статусов на appearance */
+  mapStatusToAppearance: (value: string | number) => StatusAppearance;
+  /** Заголовок колонки */
+  header?: string | ((ctx: HeaderContext<TData, unknown>) => React.ReactNode);
+  /** Функция для рендеринга описания статуса (опционально) */
+  renderDescription?: (value: string) => string;
+  /** Размер колонки */
+  size?: number;
+  /** Минимальный размер колонки */
+  minSize?: number;
+  /** Максимальный размер колонки */
+  maxSize?: number;
+  /** Закрепление колонки */
+  pinned?: 'left' | 'right';
+  /** Включить сортировку */
+  enableSorting?: boolean;
+  /** Включить изменение размера */
+  enableResizing?: boolean;
+};
+
+/** Вспомогательная функция для создания колонки со статусами */
+export function getStatusColumnDef<TData extends object, TFilters extends FiltersState>({
+  accessorKey,
+  mapStatusToAppearance,
+  header = 'Статус',
+  renderDescription,
+  size = 150,
+  minSize,
+  maxSize,
+  pinned,
+  enableSorting = true,
+  enableResizing = true,
+}: StatusColumnDefProps<TData>): MobileTableProps<TData, TFilters>['columnDefinitions'][0] {
+  return {
+    id: String(accessorKey),
+    accessorKey: String(accessorKey),
+    header,
+    size,
+    minSize,
+    maxSize,
+    pinned,
+    enableSorting,
+    enableResizing,
+    cell: (cell: CellContext<TData, unknown>) => {
+      const statusValue = cell.getValue<string>();
+      if (!statusValue) return null;
+
+      const appearance = mapStatusToAppearance(statusValue) || 'neutral';
+      const label = renderDescription ? renderDescription(statusValue) : statusValue;
+
+      return (
+        <Status label={label} appearance={appearance} size='s' hasBackground data-test-id={TEST_IDS.statusLabel} />
+      );
+    },
+  } as MobileTableProps<TData, TFilters>['columnDefinitions'][0];
+}

package/src/helperComponents/StatusColumnDef/index.ts

@@ -0,0 +1 @@
+export * from './StatusColumnDef';

package/src/helperComponents/index.ts

@@ -1,4 +1,5 @@
 export * from './RowActionsCell';
+export * from './StatusColumnDef';
 export * from './TableCard';
 export * from './TablePagination';
 export * from './TableEmptyState';