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,14 +277,24 @@ export function App({ ctx, data }) {
     [content],
   );
 
+  const getCellData = (cellKind, formattedValue) => {
+    if (cellKind === GridCellKind.Image) {
+      return [formattedValue]
+    }
+
+    return formattedValue
+  }
+
   const getCellContent = useCallback(
     ([col, row]) => {
       const kind = cellKind[content.columns[col].type] || GridCellKind.Text;
       const columnar = content.data_orientation === "columns";
-      const cellData = columnar
+      const formattedValue = columnar
         ? content.data[col][row]
         : content.data[row][col];
 
+      const cellData = getCellData(kind, formattedValue)
+
       return {
         kind: kind,
         data: cellData,

lib/kino/data_table.ex

@@ -43,15 +43,18 @@ 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 display type overrides for the columns. The keys
+      are the column names and each value must be one of `t:Kino.Table.type/0`. By
+      default the types are inferred from the data values
   """
   @spec new(Table.Reader.t(), keyword()) :: t()
   def new(tabular, opts \\ []) do
@@ -64,7 +67,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,9 @@ 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 display type overrides for the columns. The keys
+      are the column names and each value must be one of `t:type/0`. By
+      default the types are inferred from the data values
   """
   @spec new(module(), term(), keyword()) :: t()
   def new(module, init_arg, opts \\ []) do
@@ -100,7 +105,14 @@ defmodule Kino.Table do
         fn ctx -> export.(ctx.assigns.state) end
       end
 
-    Kino.JS.Live.new(__MODULE__, {module, init_arg}, export: export)
+    types = opts[:types] || %{}
+
+    for {_key, value} <- types, value not in @types do
+      raise ArgumentError,
+            "got invalid column type: #{inspect(types)}, expected one of: #{inspect(@types)}"
+    end
+
+    Kino.JS.Live.new(__MODULE__, {module, init_arg, types}, export: export)
   end
 
   @doc """
@@ -115,7 +127,7 @@ 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)
 
     {:ok,
@@ -129,7 +141,8 @@ defmodule Kino.Table do
        page: 1,
        limit: info[:num_rows] || @limit,
        order: nil,
-       relocates: []
+       relocates: [],
+       type_overrides: types
      )}
   end
 
@@ -226,7 +239,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