WIP: use different css classes for mini-table cells and real table cells

packages/base/data/list-table-v2.vue

@@ -541,21 +541,21 @@ const tableColumns = computed(() => {
     };
 
     // Cell renderer - uses renderCellContent which handles slot, cellRenderer, and built-in types
-    col.cellRenderer = renderCellContent;
+    col.cellRenderer = (params: CellRendererParams<T>) => renderCellContent(params, false);
 
     // Header cell renderer - use custom headerCellRenderer if provided
-    col.headerCellRenderer = renderHeaderCellContent;
+    col.headerCellRenderer = (params: HeaderCellRendererParams<T>) => renderHeaderCellContent(params, false);
 
     col._listTableColumn = column;
     return col;
   });
 });
 
-const MiniTableCell = (params: CellRendererParams<T>) => renderCellContent(params);
-const MiniTableHeader = (params: HeaderCellRendererParams<T>) => renderHeaderCellContent(params);
+const MiniTableCell = (params: CellRendererParams<T>) => renderCellContent(params, true);
+const MiniTableHeader = (params: HeaderCellRendererParams<T>) => renderHeaderCellContent(params, true);
 
 // Shared cell renderer - used by both el-table-v2 and mini table for consistent rendering
-const renderCellContent = (params: CellRendererParams<T>) => {
+const renderCellContent = (params: CellRendererParams<T>, isMiniTable = false) => {
   const { cellData, rowData, column: elColumn } = params;
   const column: ListTableColumn<T> = elColumn._listTableColumn;
   const slotName = column.key;
@@ -590,15 +590,15 @@ const renderCellContent = (params: CellRendererParams<T>) => {
 
   // Handle dict display
   if (column.dict) {
-    return <span class="mini-cell-text">{formatterByDist(column.dict, cellData)}</span>;
+    return <span class={isMiniTable ? "mini-cell-text" : "table-cell-text"}>{formatterByDist(column.dict, cellData)}</span>;
   }
 
   // Handle formatting
   const formatted = formatCellValue(cellData, column, rowData);
-  return <span class="mini-cell-text">{formatted}</span>;
+  return <span class={isMiniTable ? "mini-cell-text" : "table-cell-text"}>{formatted}</span>;
 };
 
-const renderHeaderCellContent = (params: HeaderCellRendererParams<T>) => {
+const renderHeaderCellContent = (params: HeaderCellRendererParams<T>, isMiniTable = false) => {
   const { column: elColumn } = params;
   const column: ListTableColumn<T> = elColumn._listTableColumn;
 
@@ -610,7 +610,7 @@ const renderHeaderCellContent = (params: HeaderCellRendererParams<T>) => {
     .with({ i18n: P.select(P.string) }, (i18n) => t(i18n))
     .otherwise((c) => c.key);
 
-  return <span class="mini-header-cell-text">{header}</span>;
+  return <span class={isMiniTable ? "mini-header-cell-text" : "table-header-cell-text"}>{header}</span>;
 };
 
 // Get mini cell style - mirrors the real table's column width/flex distribution
@@ -703,6 +703,25 @@ const getMiniCellStyle = ({ width, minWidth, maxWidth, flexGrow, flexShrink }: C
   display: block;
 }
 
+// CSS for real table cells (used by el-table-v2)
+.table-cell-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.table-header-cell-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
 .my-table {
   flex: 1;
   width: 100%;