fix: generic render type

Responding to PR feedback:
- Changes SimpleColumn object type to string.
- Uses a generic parameter default to provide typing to Column renderMapping.
  The second type parameter on Column defaults to the original type, but if
  you set it then the renderMapping must convert to that type.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/table/SimpleColumn.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-export let object: any;
+export let object: string;
 </script>
 
 <div class="text-sm text-gray-700">

packages/renderer/src/lib/table/TestTable.svelte

@@ -18,29 +18,29 @@ const people: Person[] = [
   { id: 3, name: 'Charlie', age: 43 },
 ];
 
-const idCol: Column<Person> = new Column('Id', {
+const idCol: Column<Person, string> = new Column('Id', {
   align: 'right',
-  renderMapping: obj => obj.id,
+  renderMapping: obj => obj.id.toString(),
   renderer: SimpleColumn,
   comparator: (a, b) => a.id - b.id,
 });
 
-const nameCol: Column<Person> = new Column('Name', {
+const nameCol: Column<Person, string> = new Column('Name', {
   width: '3fr',
   renderMapping: obj => obj.name,
   renderer: SimpleColumn,
   comparator: (a, b) => a.name.localeCompare(b.name),
 });
 
-const ageCol: Column<Person> = new Column('Age', {
+const ageCol: Column<Person, string> = new Column('Age', {
   align: 'right',
-  renderMapping: obj => obj.age,
+  renderMapping: obj => obj.age.toString(),
   renderer: SimpleColumn,
   comparator: (a, b) => a.age - b.age,
   initialOrder: 'descending',
 });
 
-const columns: Column<Person>[] = [idCol, nameCol, ageCol];
+const columns: Column<Person, string>[] = [idCol, nameCol, ageCol];
 
 const row = new Row<Person>({
   selectable: person => person.age < 50,

packages/renderer/src/lib/table/table.ts

@@ -19,7 +19,7 @@
 /**
  * Options to be used when creating a Column.
  */
-export interface ColumnInformation<Type> {
+export interface ColumnInformation<Type, RenderType = Type> {
   /**
    * Column alignment, one of 'left', 'center', or 'right'.
    *
@@ -40,7 +40,7 @@ export interface ColumnInformation<Type> {
    * types (e.g. rendering 'string' instead of 'type.name') or
    * converting to a different type.
    */
-  readonly renderMapping?: (object: Type) => any;
+  readonly renderMapping?: (object: Type) => RenderType;
 
   /**
    * Svelte component, renderer for each cell in the column.
@@ -73,10 +73,10 @@ export interface ColumnInformation<Type> {
 /**
  * A table Column.
  */
-export class Column<Type> {
+export class Column<Type, RenderType = Type> {
   constructor(
     readonly title: string,
-    readonly info: ColumnInformation<Type>,
+    readonly info: ColumnInformation<Type, RenderType>,
   ) {}
 }
 

packages/renderer/src/lib/volume/VolumesList.svelte

@@ -189,21 +189,21 @@ let envColumn = new Column<VolumeInfoUI>('Environment', {
   comparator: (a, b) => a.engineName.localeCompare(b.engineName),
 });
 
-let ageColumn = new Column<VolumeInfoUI>('Age', {
+let ageColumn = new Column<VolumeInfoUI, string>('Age', {
   renderMapping: object => object.age,
   renderer: SimpleColumn,
   comparator: (a, b) => moment().diff(a.created) - moment().diff(b.created),
 });
 
-let sizeColumn = new Column<VolumeInfoUI>('Size', {
+let sizeColumn = new Column<VolumeInfoUI, string>('Size', {
   align: 'right',
   renderMapping: object => object.humanSize,
   renderer: SimpleColumn,
   comparator: (a, b) => a.size - b.size,
   initialOrder: 'descending',
 });
 
-const columns: Column<VolumeInfoUI>[] = [
+const columns: Column<VolumeInfoUI, VolumeInfoUI | string>[] = [
   statusColumn,
   nameColumn,
   envColumn,