feature(List): auto-create columns from static data (#1085)

Author: mfal

packages/components/src/components/List/model/ReactTable.ts

@@ -158,6 +158,10 @@ export class ReactTable<T> {
       s.updateTableColumnDef(getOrCreateColumnDef(s.property)),
     );
 
+    this.list.loader.staticDataProperties.forEach((property) => {
+      getOrCreateColumnDef(property);
+    });
+
     return Array.from(columnDefsMap.values());
   }
 }

packages/components/src/components/List/model/loading/IncrementalLoader.ts

@@ -11,6 +11,7 @@ import { useEffect } from "react";
 import { times } from "remeda";
 import { IncrementalLoaderState } from "@/components/List/model/loading/IncrementalLoaderState";
 import { hash } from "object-code";
+import type { PropertyName } from "@/components/List/model/types";
 
 type AsyncResourceLoadingState = AsyncResource["state"]["value"];
 
@@ -23,6 +24,7 @@ export class IncrementalLoader<T> {
   public readonly manualFiltering: boolean;
   public readonly manualPagination: boolean;
   public readonly loaderState: IncrementalLoaderState<T>;
+  public readonly staticDataProperties: PropertyName<T>[] = [];
 
   private constructor(list: List<T>, shape: IncrementalLoaderShape<T> = {}) {
     const { source } = shape;
@@ -52,6 +54,8 @@ export class IncrementalLoader<T> {
     this.manualSorting = manualSorting ?? this.manualPagination;
     this.list.filters.forEach((f) => f.onFilterUpdated(() => this.reset()));
     this.list.search?.onUpdated(() => this.reset());
+
+    this.initStaticDataProperties();
   }
 
   public static useNew<T>(
@@ -61,6 +65,27 @@ export class IncrementalLoader<T> {
     return new IncrementalLoader(list, shape);
   }
 
+  private initStaticDataProperties() {
+    const addPropertiesOfDataEntry = (data: unknown) => {
+      if (typeof data !== "object" || data === null) {
+        return;
+      }
+
+      (Object.keys(data) as PropertyName<T>[])
+        .filter((p) => !this.staticDataProperties.includes(p))
+        .forEach((p) => {
+          this.staticDataProperties.push(p);
+        });
+    };
+
+    if ("staticData" in this.dataSource) {
+      this.dataSource.staticData
+        // collect properties from just the first 100 items
+        .slice(0, 100)
+        .forEach(addPropertiesOfDataEntry);
+    }
+  }
+
   private reset(): void {
     this.loaderState.reset();
   }