diff --git a/packages/renderer/src/lib/table/SimpleColumn.spec.ts b/packages/renderer/src/lib/table/SimpleColumn.spec.ts
new file mode 100644
index 0000000000000..833e59c4039f2
--- /dev/null
+++ b/packages/renderer/src/lib/table/SimpleColumn.spec.ts
@@ -0,0 +1,33 @@
+/**********************************************************************
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+import SimpleColumn from './SimpleColumn.svelte';
+
+test('Expect simple column styling', async () => {
+ const obj = 'Test';
+ render(SimpleColumn, { object: obj });
+
+ const text = screen.getByText(obj);
+ expect(text).toBeInTheDocument();
+ expect(text).toHaveClass('text-sm');
+ expect(text).toHaveClass('text-gray-700');
+});
diff --git a/packages/renderer/src/lib/table/TestColumnAge.svelte b/packages/renderer/src/lib/table/SimpleColumn.svelte
similarity index 50%
rename from packages/renderer/src/lib/table/TestColumnAge.svelte
rename to packages/renderer/src/lib/table/SimpleColumn.svelte
index dc71cbc7635a1..ddb50874fce39 100644
--- a/packages/renderer/src/lib/table/TestColumnAge.svelte
+++ b/packages/renderer/src/lib/table/SimpleColumn.svelte
@@ -2,4 +2,6 @@
export let object: any;
-{object.age}
+
+ {object}
+
diff --git a/packages/renderer/src/lib/table/Table.svelte b/packages/renderer/src/lib/table/Table.svelte
index 2aa02886b1203..3d9c75c71cad4 100644
--- a/packages/renderer/src/lib/table/Table.svelte
+++ b/packages/renderer/src/lib/table/Table.svelte
@@ -186,7 +186,9 @@ function setGridColumns() {
: 'justify-self-start'} self-center overflow-hidden max-w-full"
role="cell">
{#if column.info.renderer}
-
+
{/if}
{/each}
diff --git a/packages/renderer/src/lib/table/TestColumnId.svelte b/packages/renderer/src/lib/table/TestColumnId.svelte
deleted file mode 100644
index 70aab1f465538..0000000000000
--- a/packages/renderer/src/lib/table/TestColumnId.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-{object.id}
diff --git a/packages/renderer/src/lib/table/TestColumnName.svelte b/packages/renderer/src/lib/table/TestColumnName.svelte
deleted file mode 100644
index 4fd618eddc59d..0000000000000
--- a/packages/renderer/src/lib/table/TestColumnName.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-{object.name}
diff --git a/packages/renderer/src/lib/table/TestTable.svelte b/packages/renderer/src/lib/table/TestTable.svelte
index cd5b957c7b06c..8678f20915d28 100644
--- a/packages/renderer/src/lib/table/TestTable.svelte
+++ b/packages/renderer/src/lib/table/TestTable.svelte
@@ -1,9 +1,7 @@
-
-
- {object.age}
-
diff --git a/packages/renderer/src/lib/volume/VolumeColumnSize.svelte b/packages/renderer/src/lib/volume/VolumeColumnSize.svelte
deleted file mode 100644
index 3682dfdd5c448..0000000000000
--- a/packages/renderer/src/lib/volume/VolumeColumnSize.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
- {object.humanSize}
-
diff --git a/packages/renderer/src/lib/volume/VolumesList.svelte b/packages/renderer/src/lib/volume/VolumesList.svelte
index 7dac703fa6156..005645e863fe6 100644
--- a/packages/renderer/src/lib/volume/VolumesList.svelte
+++ b/packages/renderer/src/lib/volume/VolumesList.svelte
@@ -22,8 +22,7 @@ import { Column, Row } from '../table/table';
import VolumeColumnStatus from './VolumeColumnStatus.svelte';
import VolumeColumnName from './VolumeColumnName.svelte';
import VolumeColumnEnvironment from './VolumeColumnEnvironment.svelte';
-import VolumeColumnSize from './VolumeColumnSize.svelte';
-import VolumeColumnAge from './VolumeColumnAge.svelte';
+import SimpleColumn from '../table/SimpleColumn.svelte';
import VolumeColumnActions from './VolumeColumnActions.svelte';
export let searchTerm = '';
@@ -191,13 +190,15 @@ let envColumn = new Column('Environment', {
});
let ageColumn = new Column('Age', {
- renderer: VolumeColumnAge,
+ renderMapping: object => object.age,
+ renderer: SimpleColumn,
comparator: (a, b) => moment().diff(a.created) - moment().diff(b.created),
});
let sizeColumn = new Column('Size', {
align: 'right',
- renderer: VolumeColumnSize,
+ renderMapping: object => object.humanSize,
+ renderer: SimpleColumn,
comparator: (a, b) => a.size - b.size,
initialOrder: 'descending',
});