fix: make horizontal scrollbars sticky to bottom
This commit is contained in:
parent
01acea6838
commit
3d6081e024
5 changed files with 115 additions and 1 deletions
|
|
@ -151,4 +151,86 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
|
|||
assert html =~ "ring-primary"
|
||||
end
|
||||
end
|
||||
|
||||
describe "table scroll wrapper contract" do
|
||||
test "sticky header table uses horizontal-only overflow wrapper" do
|
||||
rows = [%{id: "1", name: "Alice"}]
|
||||
|
||||
assigns = %{
|
||||
id: "test-table",
|
||||
rows: rows,
|
||||
row_id: fn r -> "row-#{r.id}" end,
|
||||
row_click: nil,
|
||||
sticky_header: true,
|
||||
row_item: &Function.identity/1,
|
||||
col: [
|
||||
%{
|
||||
__slot__: :col,
|
||||
label: "Name",
|
||||
inner_block: fn _socket, item -> [item[:name] || ""] end
|
||||
}
|
||||
],
|
||||
dynamic_cols: [],
|
||||
action: []
|
||||
}
|
||||
|
||||
html = render_component(&CoreComponents.table/1, assigns)
|
||||
|
||||
assert html =~ ~s(class="overflow-x-auto")
|
||||
refute html =~ ~s(class="overflow-auto")
|
||||
end
|
||||
|
||||
test "table wrapper does not enable vertical overflow by default" do
|
||||
rows = [%{id: "1", name: "Alice"}]
|
||||
|
||||
assigns = %{
|
||||
id: "test-table",
|
||||
rows: rows,
|
||||
row_id: fn r -> "row-#{r.id}" end,
|
||||
row_click: nil,
|
||||
row_item: &Function.identity/1,
|
||||
col: [
|
||||
%{
|
||||
__slot__: :col,
|
||||
label: "Name",
|
||||
inner_block: fn _socket, item -> [item[:name] || ""] end
|
||||
}
|
||||
],
|
||||
dynamic_cols: [],
|
||||
action: []
|
||||
}
|
||||
|
||||
html = render_component(&CoreComponents.table/1, assigns)
|
||||
|
||||
assert html =~ ~s(class="overflow-x-auto")
|
||||
refute html =~ ~s(class="overflow-auto")
|
||||
end
|
||||
|
||||
test "table wrapper overflow class can be overridden by caller" do
|
||||
rows = [%{id: "1", name: "Alice"}]
|
||||
|
||||
assigns = %{
|
||||
id: "test-table",
|
||||
rows: rows,
|
||||
row_id: fn r -> "row-#{r.id}" end,
|
||||
row_click: nil,
|
||||
wrapper_overflow_class: "overflow-visible",
|
||||
row_item: &Function.identity/1,
|
||||
col: [
|
||||
%{
|
||||
__slot__: :col,
|
||||
label: "Name",
|
||||
inner_block: fn _socket, item -> [item[:name] || ""] end
|
||||
}
|
||||
],
|
||||
dynamic_cols: [],
|
||||
action: []
|
||||
}
|
||||
|
||||
html = render_component(&CoreComponents.table/1, assigns)
|
||||
|
||||
assert html =~ ~s(class="overflow-visible")
|
||||
refute html =~ ~s(class="overflow-x-auto")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue