Use table from injection token

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package-lock.json

@@ -3854,6 +3854,10 @@
       "resolved": "packages/utility-features/startable-stoppable",
       "link": true
     },
+    "node_modules/@k8slens/table": {
+      "resolved": "packages/table",
+      "link": true
+    },
     "node_modules/@k8slens/test-utils": {
       "resolved": "packages/utility-features/test-utils",
       "link": true
@@ -35355,6 +35359,17 @@
         "rimraf": "^4.4.1"
       }
     },
+    "packages/table": {
+      "version": "6.5.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@k8slens/webpack": "^6.5.0-alpha.8",
+        "rimraf": "^4.4.1"
+      },
+      "peerDependencies": {
+        "@ogre-tools/injectable": "^17.1.0"
+      }
+    },
     "packages/technical-features/application/agnostic": {
       "name": "@k8slens/application",
       "version": "6.5.0",

packages/core/src/renderer/components/item-object-list/content.tsx

@@ -11,14 +11,14 @@ import { computed, makeObservable } from "mobx";
 import { Observer, observer } from "mobx-react";
 import type { ConfirmDialogParams } from "../confirm-dialog";
 import type { TableProps, TableRowProps, TableSortCallbacks } from "../table";
-import { Table, TableCell, TableHead, TableRow } from "../table";
+import { TableCell, TableHead, TableRow } from "../table";
 import type { IClassName, StrictReactNode } from "@k8slens/utilities";
 import { cssNames, isDefined, isReactNode, noop, prevDefault, stopPropagation } from "@k8slens/utilities";
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
-import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
+import type { GeneralKubeObjectListLayoutColumn, ItemObject, TableCellProps } from "@k8slens/list-layout";
 import type { Filter, PageFiltersStore } from "./page-filters/store";
 import type { LensTheme } from "../../themes/lens-theme";
 import { MenuActions } from "../menu/menu-actions";
@@ -35,6 +35,8 @@ import type { ToggleTableColumnVisibility } from "../../../features/user-prefere
 import toggleTableColumnVisibilityInjectable from "../../../features/user-preferences/common/toggle-table-column-visibility.injectable";
 import type { IsTableColumnHidden } from "../../../features/user-preferences/common/is-table-column-hidden.injectable";
 import isTableColumnHiddenInjectable from "../../../features/user-preferences/common/is-table-column-hidden.injectable";
+import type { TableComponent } from "@k8slens/table";
+import { tableComponentInjectionToken } from "@k8slens/table";
 
 export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStores extends boolean> {
   getFilters: () => Filter[];
@@ -54,6 +56,7 @@ export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStor
   customizeTableRowProps?: (item: Item) => Partial<TableRowProps<Item>>;
   addRemoveButtons?: Partial<AddRemoveButtonsProps>;
   virtual?: boolean;
+  columns?: GeneralKubeObjectListLayoutColumn[];
 
   // item details view
   hasDetailsView?: boolean;
@@ -79,6 +82,7 @@ interface Dependencies {
   openConfirmDialog: OpenConfirmDialog;
   toggleTableColumnVisibility: ToggleTableColumnVisibility;
   isTableColumnHidden: IsTableColumnHidden;
+  table: TableComponent;
 }
 
 @observer
@@ -299,6 +303,7 @@ class NonInjectedItemListLayoutContent<
     const {
       store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
       detailsItem, className, tableProps = {}, tableId, getItems, activeTheme,
+      table,
     } = this.props;
     const selectedItemId = detailsItem && detailsItem.getId();
     const classNames = cssNames(className, "box", "grow", activeTheme.get().type);
@@ -307,7 +312,7 @@ class NonInjectedItemListLayoutContent<
 
     return (
       <div className="items box grow flex column">
-        <Table
+        <table.Component
           tableId={tableId}
           virtual={virtual}
           selectable={hasDetailsView}
@@ -322,7 +327,7 @@ class NonInjectedItemListLayoutContent<
         >
           {this.renderTableHeader()}
           {this.renderItems()}
-        </Table>
+          </table.Component>
 
         <Observer>
           {() => (
@@ -385,5 +390,6 @@ export const ItemListLayoutContent = withInjectables<Dependencies, ItemListLayou
     openConfirmDialog: di.inject(openConfirmDialogInjectable),
     toggleTableColumnVisibility: di.inject(toggleTableColumnVisibilityInjectable),
     isTableColumnHidden: di.inject(isTableColumnHiddenInjectable),
+    table: di.inject(tableComponentInjectionToken),
   }),
 }) as <Item extends ItemObject, PreLoadStores extends boolean>(props: ItemListLayoutContentProps<Item, PreLoadStores>) => React.ReactElement;

packages/core/src/renderer/components/item-object-list/list-layout.tsx

@@ -13,7 +13,7 @@ import type { TableProps, TableRowProps, TableSortCallbacks } from "../table";
 import type { IClassName, StrictReactNode, SingleOrMany } from "@k8slens/utilities";
 import { cssNames, noop } from "@k8slens/utilities";
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
-import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
+import type { ItemObject, TableCellProps, GeneralKubeObjectListLayoutColumn } from "@k8slens/list-layout";
 import type { SearchInputUrlProps } from "../input";
 import type { PageFiltersStore } from "./page-filters/store";
 import { FilterType } from "./page-filters/store";
@@ -98,6 +98,7 @@ export type ItemListLayoutProps<Item extends ItemObject, PreLoadStores extends b
   headerClassName?: IClassName;
   renderHeaderTitle?: RenderHeaderTitle<Item, PreLoadStores>;
   customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
+  columns?: GeneralKubeObjectListLayoutColumn[];
 
   // items list configuration
   isReady?: boolean; // show loading indicator while not ready

packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx

@@ -42,7 +42,7 @@ export interface KubeObjectListLayoutProps<
   // eslint-disable-next-line unused-imports/no-unused-vars-ts, @typescript-eslint/no-unused-vars
   A extends KubeApi<K, D>,
   D extends KubeJsonApiDataFor<K>,
-> extends Omit<ItemListLayoutProps<K, false>, "getItems" | "dependentStores" | "preloadStores"> {
+> extends Omit<ItemListLayoutProps<K, false>, "getItems" | "dependentStores" | "preloadStores" | "columns"> {
   items?: K[];
   getItems?: () => K[];
   store: KubeItemListStore<K>;
@@ -193,6 +193,7 @@ class NonInjectedKubeObjectListLayout<
         getItems={() => this.props.items || store.contextItems}
         preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
         detailsItem={this.selectedItem}
+        columns={targetColumns as GeneralKubeObjectListLayoutColumn[]}
         customizeHeader={[
           ({ filters, searchProps, info, ...headerPlaceHolders }) => ({
             filters: (