Display image urls as images in table cells

assets/packs/data_table/App.js

@@ -49,6 +49,7 @@ const headerIcons = {
   date: GridColumnIcon.HeaderDate,
   list: GridColumnIcon.HeaderArray,
   struct: "curlyBraces",
+  image: GridColumnIcon.HeaderImage
 };
 
 const cellKind = {
@@ -58,6 +59,7 @@ const cellKind = {
   date: GridCellKind.Text,
   list: GridCellKind.Text,
   struct: GridCellKind.Text,
+  image: GridCellKind.Image,
 };
 
 const theme = {
@@ -275,6 +277,14 @@ export function App({ ctx, data }) {
     [content],
   );
 
+  const mapCellData = (cellKind, cellData) => {
+    if (cellKind === GridCellKind.Image && !Array.isArray(cellData)) {
+      return [cellData]
+    }
+
+    return cellData
+  }
+
   const getCellContent = useCallback(
     ([col, row]) => {
       const kind = cellKind[content.columns[col].type] || GridCellKind.Text;
@@ -283,10 +293,12 @@ export function App({ ctx, data }) {
         ? content.data[col][row]
         : content.data[row][col];
 
+      const mappedCellData = mapCellData(kind, cellData)
+
       return {
         kind: kind,
-        data: cellData,
-        displayData: cellData,
+        data: mappedCellData,
+        displayData: mappedCellData,
         allowOverlay: true,
         allowWrapping: false,
         readonly: true,

lib/kino/data_table.ex

@@ -43,15 +43,17 @@ defmodule Kino.DataTable do
       data. Sorting requires traversal of the whole enumerable, so it
       may not be desirable for large lazy enumerables. Defaults to `true`
 
-   * `:formatter` - a 2-arity function that is used to format the data
-     in the table. The first parameter passed is the `key` (column name) and
-     the second is the value to be formatted. When formatting column headings
-     the key is the special value `:__header__`. The formatter function must
-     return either `{:ok, string}` or `:default`. When the return value is
-     `:default` the default data table formatting is applied.
+    * `:formatter` - a 2-arity function that is used to format the data
+      in the table. The first parameter passed is the `key` (column name) and
+      the second is the value to be formatted. When formatting column headings
+      the key is the special value `:__header__`. The formatter function must
+      return either `{:ok, string}` or `:default`. When the return value is
+      `:default` the default data table formatting is applied.
 
     * `:num_rows` - the number of rows to show in the table. Defaults to `10`.
 
+    * `:types` - a map of type overrides for the columns.
+      The keys are the column names and the values are the types to be used in place of inferred ones.
   """
   @spec new(Table.Reader.t(), keyword()) :: t()
   def new(tabular, opts \\ []) do
@@ -64,7 +66,8 @@ defmodule Kino.DataTable do
     Kino.Table.new(
       __MODULE__,
       {data_rows, data_columns, count, name, sorting_enabled, inspected, formatter, num_rows},
-      export: fn state -> {"text", state.inspected} end
+      export: fn state -> {"text", state.inspected} end,
+      types: opts[:types]
     )
   end
 

lib/kino/table.ex

@@ -36,6 +36,7 @@ defmodule Kino.Table do
     * "struct"
     * "text"
     * "uri"
+    * "image"
 
   """
   @type type :: String.t()
@@ -80,6 +81,7 @@ defmodule Kino.Table do
 
   @type t :: Kino.JS.Live.t()
 
+  @types ["date", "list", "number", "struct", "text", "uri", "image"]
   @limit 10
 
   @doc """
@@ -92,6 +94,8 @@ defmodule Kino.Table do
       This works the same as `Kino.JS.new/3`, except the function
       receives the state as an argument
 
+    * `:types` - a map of type overrides for the columns.
+      The keys are the column names and the values are the types to be used in place of inferred ones.
   """
   @spec new(module(), term(), keyword()) :: t()
   def new(module, init_arg, opts \\ []) do
@@ -100,7 +104,7 @@ defmodule Kino.Table do
         fn ctx -> export.(ctx.assigns.state) end
       end
 
-    Kino.JS.Live.new(__MODULE__, {module, init_arg}, export: export)
+    Kino.JS.Live.new(__MODULE__, {module, init_arg, opts[:types]}, export: export)
   end
 
   @doc """
@@ -115,9 +119,14 @@ defmodule Kino.Table do
   end
 
   @impl true
-  def init({module, init_arg}, ctx) do
+  def init({module, init_arg, types}, ctx) do
     {:ok, info, state} = module.init(init_arg)
 
+    if types != nil and not Enum.all?(types, fn {_, value} -> value in @types end) do
+      raise ArgumentError,
+            "Invalid column types were provided: #{inspect(types)}. Valid types are: #{inspect(@types)}"
+    end
+
     {:ok,
      assign(ctx,
        module: module,
@@ -129,7 +138,8 @@ defmodule Kino.Table do
        page: 1,
        limit: info[:num_rows] || @limit,
        order: nil,
-       relocates: []
+       relocates: [],
+       type_overrides: types
      )}
   end
 
@@ -226,7 +236,7 @@ defmodule Kino.Table do
         sample_data
         |> infer_types()
         |> Enum.zip_with(columns, fn type, column ->
-          Map.put_new(column, :type, type)
+          Map.put_new(column, :type, ctx.assigns.type_overrides[column.label] || type)
         end)
       else
         columns