DataTable - support setting number of rows (#476)

Co-authored-by: Jonatan Kłosko <[email protected]>

assets/packs/data_table/LimitSelect.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { RiArrowDownSLine } from "@remixicon/react";
 
+const LIMIT_OPTIONS = [10, 20, 50, 100];
+
 export default function LimitSelect({ limit, totalRows, onChange }) {
   return (
     <div>
@@ -12,10 +14,16 @@ export default function LimitSelect({ limit, totalRows, onChange }) {
             value={limit}
             onChange={(event) => onChange(parseInt(event.target.value))}
           >
-            <option value="10">10</option>
-            <option value="20">20</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
+            {!LIMIT_OPTIONS.includes(limit) && (
+              <option key={limit} value={limit.toString()}>
+                {limit}
+              </option>
+            )}
+            {LIMIT_OPTIONS.map((value) => (
+              <option key={value} value={value.toString()}>
+                {value}
+              </option>
+            ))}
             {totalRows ? <option value={totalRows}>All</option> : null}
           </select>
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">

lib/kino/data_table.ex

@@ -50,17 +50,20 @@ defmodule Kino.DataTable do
      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`.
+
   """
   @spec new(Table.Reader.t(), keyword()) :: t()
   def new(tabular, opts \\ []) do
     name = Keyword.get(opts, :name, "Data")
     sorting_enabled = Keyword.get(opts, :sorting_enabled, true)
     formatter = Keyword.get(opts, :formatter)
+    num_rows = Keyword.get(opts, :num_rows)
     {data_rows, data_columns, count, inspected} = prepare_data(tabular, opts)
 
     Kino.Table.new(
       __MODULE__,
-      {data_rows, data_columns, count, name, sorting_enabled, inspected, formatter},
+      {data_rows, data_columns, count, name, sorting_enabled, inspected, formatter, num_rows},
       export: fn state -> {"text", state.inspected} end
     )
   end
@@ -172,9 +175,12 @@ defmodule Kino.DataTable do
   end
 
   @impl true
-  def init({data_rows, data_columns, count, name, sorting_enabled, inspected, formatter}) do
+  def init(
+        {data_rows, data_columns, count, name, sorting_enabled, inspected, formatter, num_rows}
+      ) do
     features = Kino.Utils.truthy_keys(pagination: true, sorting: sorting_enabled)
     info = %{name: name, features: features}
+    info = if(num_rows, do: Map.put(info, :num_rows, num_rows), else: info)
 
     {count, slicing_fun, slicing_cache} = init_slicing(data_rows, count)
 

lib/kino/table.ex

@@ -9,7 +9,8 @@ defmodule Kino.Table do
   @type info :: %{
           :name => String.t(),
           :features => list(:export | :refetch | :pagination | :sorting | :relocate),
-          optional(:export) => %{formats: list(String.t())}
+          optional(:export) => %{formats: list(String.t())},
+          optional(:num_rows) => pos_integer()
         }
 
   @type rows_spec :: %{
@@ -126,7 +127,7 @@ defmodule Kino.Table do
        content: nil,
        # Data specification
        page: 1,
-       limit: @limit,
+       limit: info[:num_rows] || @limit,
        order: nil,
        relocates: []
      )}

test/kino/data_table_test.exs

@@ -231,6 +231,21 @@ defmodule Kino.DataTableTest do
     assert %{name: "Example"} = data
   end
 
+  test "supports setting number of rows" do
+    entries = %{x: 1..3, y: 1..3}
+
+    kino = Kino.DataTable.new(entries, keys: [:x, :y], num_rows: 2)
+    data = connect(kino)
+
+    assert %{
+             content: %{
+               columns: [%{key: "0", label: ":x"}, %{key: "1", label: ":y"}],
+               data: [["1", "1"], ["2", "2"]],
+               total_rows: 3
+             }
+           } = data
+  end
+
   test "supports sliceable data" do
     entries = %{x: 1..3, y: 1..3}