@odigos/ui-kit 0.0.11 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.12](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.11...ui-kit-v0.0.12) (2025-03-20)
+
+
+### Bug Fixes
+
+* table row click ([#34](https://github.com/odigos-io/ui-kit/issues/34)) ([5e78a3f](https://github.com/odigos-io/ui-kit/commit/5e78a3f516f294dae83729ebd52bf37bbfa3dd61))
+
 ## [0.0.11](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.10...ui-kit-v0.0.11) (2025-03-20)
 
 

package/lib/components/interactive-table/index.d.ts

@@ -13,14 +13,15 @@ interface RowCell {
     textColor?: CSSProperties['color'];
     withTooltip?: boolean;
 }
+interface Row {
+    status?: StatusType;
+    faded?: boolean;
+    onClick?: () => void;
+    cells: RowCell[];
+}
 interface InteractiveTableProps {
     columns: ColumnCell[];
-    rows: {
-        status?: StatusType;
-        faded?: boolean;
-        cells: RowCell[];
-    }[];
-    onRowClick?: (index: number) => void;
+    rows: Row[];
 }
 declare const InteractiveTable: FC<InteractiveTableProps>;
-export { InteractiveTable, type InteractiveTableProps, type ColumnCell, type RowCell };
+export { InteractiveTable, type InteractiveTableProps, type ColumnCell, type RowCell, type Row };

package/lib/components/interactive-table/{row.d.ts → table-row.d.ts}

@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import { ColumnCell, RowCell } from '.';
+import { type FC } from 'react';
 import { StatusType } from '@/types';
-interface RowProps {
+import { ColumnCell, RowCell } from '.';
+interface TableRowProps {
     index: number;
     columns: ColumnCell[];
     cells: RowCell[];
@@ -9,5 +9,5 @@ interface RowProps {
     status?: StatusType;
     faded?: boolean;
 }
-declare const Row: FC<RowProps>;
-export { Row, type RowProps };
+declare const TableRow: FC<TableRowProps>;
+export { TableRow, type TableRowProps };

package/lib/components.js

@@ -1,5 +1,5 @@
-import { B as Button } from './index-B_fzHjxk.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-B_fzHjxk.js';
+import { B as Button } from './index-B5wdZoej.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-B5wdZoej.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';

package/lib/containers.js

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CJKFedQi.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-B_fzHjxk.js';
+import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-B5wdZoej.js';
 import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DYEcdkUF.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
@@ -683,6 +683,10 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
         return {
             status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
+            onClick: () => {
+                setDrawerType(EntityTypes.Action);
+                setDrawerEntityId(act.id);
+            },
             cells: [
                 {
                     columnKey: 'icon',
@@ -731,10 +735,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.Actions, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
-            React.createElement(InteractiveTable, { columns: columns$3, rows: rows, onRowClick: (idx) => {
-                    setDrawerType(EntityTypes.Action);
-                    setDrawerEntityId(filtered[idx].id);
-                } })),
+            React.createElement(InteractiveTable, { columns: columns$3, rows: rows })),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
@@ -916,9 +917,23 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
 
 const ComputePlatforms = ({ connections, onSelect }) => {
     const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
+    const filtered = useMemo(() => connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
         (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
-        (!statuses?.length || statuses.find((opt) => opt.id === status)));
+        (!statuses?.length || statuses.find((opt) => opt.id === status))), [connections, searchText, platformTypes, statuses]);
+    const rows = useMemo(() => filtered.map((item) => ({
+        onClick: () => onSelect(item),
+        cells: [
+            { columnKey: 'id', value: item.id },
+            { columnKey: 'type', value: item.type },
+            { columnKey: 'name', value: item.name || getPlatformLabel(item.type) },
+            { columnKey: 'icon', icon: getPlatformIcon(item.type) },
+            {
+                columnKey: 'status',
+                component: () => (React.createElement("div", { style: { lineHeight: 1 } },
+                    React.createElement(Status, { title: status === StatusType.Success ? 'connection alive' : 'connection lost', status: item.status, withIcon: true, withBorder: true }))),
+            },
+        ],
+    })), [filtered]);
     return (React.createElement(React.Fragment, null,
         React.createElement(InteractiveTable, { columns: [
                 { key: 'icon', title: '' },
@@ -926,19 +941,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                 { key: 'type', title: 'Type' },
                 { key: 'status', title: 'Status' },
                 { key: 'id', title: 'Unique ID' },
-            ], rows: filtered.map(({ id, name, type, status }) => ({
-                cells: [
-                    { columnKey: 'id', value: id },
-                    { columnKey: 'type', value: type },
-                    { columnKey: 'name', value: !!name ? name : getPlatformLabel(type) },
-                    { columnKey: 'icon', icon: getPlatformIcon(type) },
-                    {
-                        columnKey: 'status',
-                        component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                            React.createElement(Status, { title: status === StatusType.Success ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
-                    },
-                ],
-            })), onRowClick: (idx) => onSelect(filtered[idx]) }),
+            ], rows: rows }),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
@@ -14336,6 +14339,10 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
         return {
             status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
+            onClick: () => {
+                setDrawerType(EntityTypes.Destination);
+                setDrawerEntityId(dest.id);
+            },
             cells: [
                 {
                     columnKey: 'icon',
@@ -14372,10 +14379,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.Destinations, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
-            React.createElement(InteractiveTable, { columns: columns$2, rows: rows, onRowClick: (idx) => {
-                    setDrawerType(EntityTypes.Destination);
-                    setDrawerEntityId(filtered[idx].id);
-                } })),
+            React.createElement(InteractiveTable, { columns: columns$2, rows: rows })),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
@@ -14763,6 +14767,10 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
     // note: rules do not have filters yet
     instrumentationRules.map((rule) => {
         return {
+            onClick: () => {
+                setDrawerType(EntityTypes.InstrumentationRule);
+                setDrawerEntityId(rule.ruleId);
+            },
             cells: [
                 {
                     columnKey: 'icon',
@@ -14811,10 +14819,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.InstrumentationRules, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
-            React.createElement(InteractiveTable, { columns: columns$1, rows: rows, onRowClick: (idx) => {
-                    setDrawerType(EntityTypes.InstrumentationRule);
-                    setDrawerEntityId(instrumentationRules[idx].ruleId);
-                } })),
+            React.createElement(InteractiveTable, { columns: columns$1, rows: rows })),
         !instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
@@ -15644,6 +15649,10 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         return {
             status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
+            onClick: () => {
+                setDrawerType(EntityTypes.Source);
+                setDrawerEntityId(id);
+            },
             cells: [
                 {
                     columnKey: 'checkbox-and-icon',
@@ -15689,10 +15698,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
             React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.Sources, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
-            React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows, onRowClick: (idx) => {
-                    setDrawerType(EntityTypes.Source);
-                    setDrawerEntityId({ namespace: filtered[idx].namespace, name: filtered[idx].name, kind: filtered[idx].kind });
-                } })),
+            React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows })),
         isAwaitingInstrumentation ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
             React.createElement(TraceLoader, { width: 420 }),
             React.createElement(FlexRow, { "$gap": 16 },

package/lib/{index-B_fzHjxk.js → index-B5wdZoej.js}

@@ -3671,7 +3671,7 @@ const TableRow$1 = styled.tr `
     padding-right: 0 !important;
   }
 `;
-const TableData$1 = styled.td `
+const TableData = styled.td `
   vertical-align: top;
   padding: 4px 6px;
 `;
@@ -3751,8 +3751,8 @@ const PrettyJsonCode = ({ darkMode, str }) => {
     const theme = Theme.useTheme();
     const renderEmptyRows = (count = 2) => {
         const rows = new Array(count).fill((props) => (React.createElement(TableRow$1, { ...props },
-            React.createElement(TableData$1, null),
-            React.createElement(TableData$1, null))));
+            React.createElement(TableData, null),
+            React.createElement(TableData, null))));
         return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: useId(), style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
     };
     return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, getTokenProps, tokens }) => (React.createElement(Table$1, null,
@@ -3763,15 +3763,15 @@ const PrettyJsonCode = ({ darkMode, str }) => {
                 return (React.createElement(Fragment, { key: `line-${i}` },
                     renderEmptyRows(),
                     React.createElement(TableRow$1, { ...lineProps },
-                        React.createElement(TableData$1, null,
+                        React.createElement(TableData, null,
                             React.createElement(Title$c, null, formattedLine[0].content)),
-                        React.createElement(TableData$1, null))));
+                        React.createElement(TableData, null))));
             }
             else if (formattedLine.length === 2) {
                 return (React.createElement(TableRow$1, { key: `line-${i}`, ...lineProps }, formattedLine.map((token, ii) => {
                     const { text, components } = getComponentsFromPropertyString(token.content, theme);
                     const isRowTitle = ii === 0;
-                    return (React.createElement(TableData$1, { key: `line-${i}-token-${ii}` },
+                    return (React.createElement(TableData, { key: `line-${i}-token-${ii}` },
                         React.createElement(FlexRow, null,
                             React.createElement(FlexRow, null, components),
                             React.createElement(CodeLineToken, { "$noWrap": isRowTitle }, text))));
@@ -3992,7 +3992,7 @@ const Body = styled.div `
   gap: 8px;
   padding: 6px 18px 12px 18px;
 `;
-const Row$1 = styled.div `
+const Row = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
@@ -4039,7 +4039,7 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
                     : status === StatusType.Warning
                         ? theme.text.warning_secondary
                         : theme.text.info_secondary;
-            return (React.createElement(Row$1, { key: `condition-${idx}` },
+            return (React.createElement(Row, { key: `condition-${idx}` },
                 React.createElement(Icon, null),
                 React.createElement(FlexRow, { "$gap": 12, style: { width: '100%', justifyContent: 'space-between' } },
                     React.createElement(Text, { color: color, size: 12 },
@@ -4370,11 +4370,11 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
         React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OtherStatus.Loading : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
 };
 
-const TableRow = styled.tr `
+const Tr = styled.tr `
   cursor: ${({ $withHover }) => ($withHover ? 'pointer' : 'default')};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
 `;
-const TableData = styled.td `
+const Td = styled.td `
   position: relative;
   width: fit-content;
   padding: 16px 8px 16px ${({ $isFirst }) => ($isFirst ? '16px' : '8px')};
@@ -4410,10 +4410,10 @@ const RowBackground = styled.div `
         ? theme.text[$status] + Theme.opacity.hex['010']
         : theme.colors.secondary + Theme.opacity.hex['005']};
 `;
-const Row = ({ index, columns, cells, onClick, status, faded }) => {
+const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
     const { containerRef, containerHeight, containerWidth } = useContainerSize();
     const [isHovered, setIsHovered] = useState(false);
-    return (React.createElement(TableRow
+    return (React.createElement(Tr
     // @ts-ignore
     , { 
         // @ts-ignore
@@ -4422,7 +4422,7 @@ const Row = ({ index, columns, cells, onClick, status, faded }) => {
         if (!rowCell)
             return null;
         const { value, textColor, withTooltip, icon, component: Component } = rowCell;
-        return (React.createElement(TableData, { key: useId(), "$isFirst": i === 0 },
+        return (React.createElement(Td, { key: useId(), "$isFirst": i === 0 },
             !!icon ? (React.createElement(IconWrapped, { icon: icon })) : !!Component ? (React.createElement(Component, null)) : (React.createElement(Tooltip, { text: withTooltip && !!value ? String(value) : '' },
                 React.createElement(RowText, { "$color": textColor }, !isEmpty(value) ? value : '-'))),
             i === 0 && React.createElement(RowBackground, { "$height": containerHeight, "$width": containerWidth, "$top": containerHeight * index, "$hovered": isHovered, "$status": status })));
@@ -4468,7 +4468,7 @@ const Title$9 = styled(Text) `
   text-wrap: nowrap;
 `;
 const TableBody = styled.tbody ``;
-const InteractiveTable = ({ columns, rows, onRowClick }) => {
+const InteractiveTable = ({ columns, rows }) => {
     const [sortDirection, setSortDirection] = useState(SortDirection.Ascending);
     const [sortBy, setSortBy] = useState('name');
     const onSort = useCallback((key) => {
@@ -4480,7 +4480,7 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
             setSortDirection(SortDirection.Ascending);
         }
     }, [sortBy]);
-    const sorted = useMemo(() => {
+    const sortedRows = useMemo(() => {
         const getCellValue = (row, key) => {
             return row.cells.find(({ columnKey }) => columnKey === key)?.value ?? null;
         };
@@ -4494,22 +4494,22 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
             // Fallback (handles null, undefined, mixed types)
             return String(a).localeCompare(String(b));
         };
-        return !!sortBy
+        return (sortBy
             ? [...rows].sort((a, b) => {
                 const valueA = getCellValue(a, sortBy);
                 const valueB = getCellValue(b, sortBy);
                 const direction = sortDirection === SortDirection.Ascending ? 1 : -1;
                 return direction * compareValues(valueA, valueB);
             })
-            : rows;
-    }, [rows, sortBy, sortDirection]);
+            : rows).map(({ status, faded, cells, onClick }, i) => React.createElement(TableRow, { key: `row-${i}`, index: i, columns: columns, cells: cells, onClick: onClick, status: status, faded: faded }));
+    }, [columns, rows, sortBy, sortDirection]);
     return (React.createElement(Container$k, null,
         React.createElement(Table, null,
             React.createElement(TableHead, null,
                 React.createElement("tr", null, columns.map(({ key, title, sortable }) => (React.createElement(TableTitle, { key: `column-${key}` }, sortable ? (React.createElement(SortClickable, { onClick: () => onSort(key) },
                     React.createElement(SortArrowsIcon, null),
                     React.createElement(Title$9, null, title))) : (React.createElement(Title$9, null, title))))))),
-            React.createElement(TableBody, null, sorted.map(({ status, faded, cells }, i) => (React.createElement(Row, { key: `row-${i}`, index: i, columns: columns, cells: cells, onClick: !!onRowClick ? () => onRowClick(i) : undefined, status: status, faded: faded })))))));
+            React.createElement(TableBody, null, sortedRows))));
 };
 
 var DataCardFieldTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "author": "Odigos",
   "repository": {
     "type": "git",