mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-12 12:40:29 +08:00
significantly improve the performance of gr.Dataframe for large datasets (#5342)
* virtualise the dataframe * add changeset * fix non visible df * add changeset * tweak width calculation * check client * add changeset * fix weird heights * add changeset * remove logs * add changeset * fix height measurement * fix tests * fix rendering for short dataframes * cleanup * add changeset * fix scroll and loading * fix scollbars and loading border * fix scollbars and loading border * add changeset * fix many bugs * fixes * maybe this * tweaks * fix everything * notebooks * remove comments * fix things * fix visibility issue * tweak * fix demos --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn
GitHub
parent
7ab4b70f68
commit
afac000633
9
.changeset/five-gifts-bathe.md
Normal file
9
.changeset/five-gifts-bathe.md
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
"@gradio/dataframe": minor
|
||||
"@gradio/markdown": minor
|
||||
"@gradio/statustracker": minor
|
||||
"@gradio/theme": minor
|
||||
"gradio": minor
|
||||
---
|
||||
|
||||
feat:significantly improve the performance of `gr.Dataframe` for large datasets
|
||||
@ -1 +1 @@
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: hello_blocks"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", " return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", " name = gr.Textbox(label=\"Name\")\n", " output = gr.Textbox(label=\"Output Box\")\n", " greet_btn = gr.Button(\"Greet\")\n", " greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", " \n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: hello_blocks"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", " return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", " name = gr.Textbox(label=\"Name\")\n", " output = gr.Textbox(label=\"Output Box\")\n", " greet_btn = gr.Button(\"Greet\")\n", " greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
@ -8,7 +8,6 @@ with gr.Blocks() as demo:
|
||||
output = gr.Textbox(label="Output Box")
|
||||
greet_btn = gr.Button("Greet")
|
||||
greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
demo.launch()
|
||||
demo.launch()
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
import { StatusTracker } from "@gradio/statustracker";
|
||||
import type { LoadingStatus } from "@gradio/statustracker";
|
||||
import { afterUpdate } from "svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
type Headers = string[];
|
||||
type Data = (string | number)[][];
|
||||
@ -57,6 +58,18 @@
|
||||
handle_change();
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
(Array.isArray(value) && value?.[0]?.length === 0) ||
|
||||
value.data?.[0]?.length === 0
|
||||
) {
|
||||
value = {
|
||||
data: [Array(col_count?.[0] || 3).fill("")],
|
||||
headers: Array(col_count?.[0] || 3)
|
||||
.fill("")
|
||||
.map((_, i) => `${i + 1}`)
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Block
|
||||
@ -69,7 +82,7 @@
|
||||
{min_width}
|
||||
allow_overflow={false}
|
||||
>
|
||||
<StatusTracker {...loading_status} />
|
||||
<StatusTracker {...loading_status} border={true} />
|
||||
<Table
|
||||
{label}
|
||||
{row_count}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { ActionReturn } from "svelte/action";
|
||||
import { MarkdownCode } from "@gradio/markdown";
|
||||
|
||||
export let edit: boolean;
|
||||
@ -16,25 +18,44 @@
|
||||
right: string;
|
||||
display: boolean;
|
||||
}[];
|
||||
export let clear_on_focus = false;
|
||||
export let select_on_focus = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let el: HTMLInputElement | null;
|
||||
$: _value = value;
|
||||
|
||||
function use_focus(node: HTMLInputElement): ActionReturn {
|
||||
if (clear_on_focus) {
|
||||
_value = "";
|
||||
}
|
||||
if (select_on_focus) {
|
||||
node.select();
|
||||
}
|
||||
|
||||
node.focus();
|
||||
|
||||
return {};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if edit}
|
||||
<input
|
||||
bind:this={el}
|
||||
bind:value={_value}
|
||||
class:header
|
||||
tabindex="-1"
|
||||
{value}
|
||||
on:keydown
|
||||
on:blur={({ currentTarget }) => {
|
||||
value = currentTarget.value;
|
||||
currentTarget.setAttribute("tabindex", "-1");
|
||||
dispatch("blur");
|
||||
}}
|
||||
use:use_focus
|
||||
on:keydown
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<span on:dblclick tabindex="-1" role="button" class:edit>
|
||||
<span on:dblclick tabindex="-1" role="button" class:edit on:focus>
|
||||
{#if datatype === "html"}
|
||||
{@html value}
|
||||
{:else if datatype === "markdown"}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, tick } from "svelte";
|
||||
import { createEventDispatcher, tick, onMount } from "svelte";
|
||||
import { dsvFormat } from "d3-dsv";
|
||||
import { dequal } from "dequal/lite";
|
||||
import { copy } from "@gradio/utils";
|
||||
@ -8,6 +8,7 @@
|
||||
import EditableCell from "./EditableCell.svelte";
|
||||
import type { SelectData } from "@gradio/utils";
|
||||
import { _ } from "svelte-i18n";
|
||||
import VirtualTable from "./VirtualTable.svelte";
|
||||
|
||||
type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
|
||||
|
||||
@ -27,18 +28,15 @@
|
||||
|
||||
export let editable = true;
|
||||
export let wrap = false;
|
||||
export let height: number | undefined = undefined;
|
||||
|
||||
let selected: false | string = false;
|
||||
export let height: number | undefined;
|
||||
let selected: false | [number, number] = false;
|
||||
|
||||
$: {
|
||||
if (values && !Array.isArray(values)) {
|
||||
headers = values.headers;
|
||||
values = values.data;
|
||||
selected = false;
|
||||
} else if (values === null) {
|
||||
values = [];
|
||||
selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,15 +45,13 @@
|
||||
select: SelectData;
|
||||
}>();
|
||||
|
||||
let editing: false | string = false;
|
||||
let editing: false | [number, number] = false;
|
||||
|
||||
const get_data_at = (row: number, col: number): string | number =>
|
||||
data[row][col].value;
|
||||
data?.[row]?.[col]?.value;
|
||||
$: {
|
||||
if (selected !== false) {
|
||||
const loc = selected.split("-");
|
||||
const row = parseInt(loc[0]);
|
||||
const col = parseInt(loc[1]);
|
||||
const [row, col] = selected;
|
||||
if (!isNaN(row) && !isNaN(col)) {
|
||||
dispatch("select", { index: [row, col], value: get_data_at(row, col) });
|
||||
}
|
||||
@ -66,8 +62,13 @@
|
||||
{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
|
||||
> = {};
|
||||
|
||||
let data_binding: Record<string, (typeof data)[0][0]> = {};
|
||||
|
||||
type Headers = { value: string; id: string }[];
|
||||
|
||||
function make_id(): string {
|
||||
return Math.random().toString(36).substring(2, 15);
|
||||
}
|
||||
function make_headers(_head: string[]): Headers {
|
||||
let _h = _head || [];
|
||||
if (col_count[1] === "fixed" && _h.length < col_count[0]) {
|
||||
@ -81,13 +82,13 @@
|
||||
return Array(col_count[0])
|
||||
.fill(0)
|
||||
.map((_, i) => {
|
||||
const _id = `h-${i}`;
|
||||
const _id = make_id();
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: JSON.stringify(i + 1) };
|
||||
});
|
||||
}
|
||||
return _h.map((h, i) => {
|
||||
const _id = `h-${i}`;
|
||||
const _id = make_id();
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: h ?? "" };
|
||||
});
|
||||
@ -116,9 +117,11 @@
|
||||
)
|
||||
.fill(0)
|
||||
.map((_, j) => {
|
||||
const id = `${i}-${j}`;
|
||||
els[id] = { input: null, cell: null };
|
||||
return { value: _values?.[i]?.[j] ?? "", id };
|
||||
const id = make_id();
|
||||
els[id] = els[id] || { input: null, cell: null };
|
||||
const obj = { value: _values?.[i]?.[j] ?? "", id };
|
||||
data_binding[id] = obj;
|
||||
return obj;
|
||||
})
|
||||
);
|
||||
}
|
||||
@ -128,27 +131,18 @@
|
||||
|
||||
$: {
|
||||
if (!dequal(headers, old_headers)) {
|
||||
_headers = make_headers(headers);
|
||||
|
||||
old_headers = headers;
|
||||
refresh_focus();
|
||||
trigger_headers();
|
||||
}
|
||||
}
|
||||
|
||||
function trigger_headers(): void {
|
||||
_headers = make_headers(headers);
|
||||
|
||||
old_headers = headers.slice();
|
||||
}
|
||||
$: if (!dequal(values, old_val)) {
|
||||
data = process_data(values as (string | number)[][]);
|
||||
old_val = values as (string | number)[][];
|
||||
|
||||
refresh_focus();
|
||||
}
|
||||
|
||||
async function refresh_focus(): Promise<void> {
|
||||
if (typeof editing === "string") {
|
||||
await tick();
|
||||
els[editing as string]?.input?.focus();
|
||||
} else if (typeof selected === "string") {
|
||||
await tick();
|
||||
els[selected as string]?.input?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
let data: { id: string; value: string | number }[][] = [[]];
|
||||
@ -163,7 +157,7 @@
|
||||
|
||||
function get_sort_status(
|
||||
name: string,
|
||||
_sort: number,
|
||||
_sort?: number,
|
||||
direction?: SortDirection
|
||||
): "none" | "ascending" | "descending" {
|
||||
if (!_sort) return "none";
|
||||
@ -189,58 +183,82 @@
|
||||
);
|
||||
}
|
||||
|
||||
async function start_edit(id: string, clear?: boolean): Promise<void> {
|
||||
if (!editable || editing === id) return;
|
||||
async function start_edit(i: number, j: number): Promise<void> {
|
||||
if (!editable || dequal(editing, [i, j])) return;
|
||||
|
||||
if (clear) {
|
||||
const [i, j] = get_current_indices(id);
|
||||
|
||||
data[i][j].value = "";
|
||||
}
|
||||
editing = id;
|
||||
await tick();
|
||||
const { input } = els[id];
|
||||
input?.focus();
|
||||
editing = [i, j];
|
||||
}
|
||||
|
||||
function move_cursor(
|
||||
key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
|
||||
current_coords: [number, number]
|
||||
): void {
|
||||
const dir = {
|
||||
ArrowRight: [0, 1],
|
||||
ArrowLeft: [0, -1],
|
||||
ArrowDown: [1, 0],
|
||||
ArrowUp: [-1, 0]
|
||||
}[key];
|
||||
|
||||
const i = current_coords[0] + dir[0];
|
||||
const j = current_coords[1] + dir[1];
|
||||
|
||||
if (i < 0 && j <= 0) {
|
||||
selected_header = j;
|
||||
selected = false;
|
||||
} else {
|
||||
const is_data = data[i]?.[j];
|
||||
selected = is_data ? [i, j] : selected;
|
||||
}
|
||||
}
|
||||
|
||||
let clear_on_focus = false;
|
||||
// eslint-disable-next-line complexity
|
||||
async function handle_keydown(
|
||||
event: KeyboardEvent,
|
||||
i: number,
|
||||
j: number,
|
||||
id: string
|
||||
): Promise<void> {
|
||||
let is_data;
|
||||
async function handle_keydown(event: KeyboardEvent): Promise<void> {
|
||||
if (selected_header !== false && header_edit === false) {
|
||||
switch (event.key) {
|
||||
case "ArrowDown":
|
||||
selected = [0, selected_header];
|
||||
selected_header = false;
|
||||
return;
|
||||
case "ArrowLeft":
|
||||
selected_header =
|
||||
selected_header > 0 ? selected_header - 1 : selected_header;
|
||||
return;
|
||||
case "ArrowRight":
|
||||
selected_header =
|
||||
selected_header < _headers.length - 1
|
||||
? selected_header + 1
|
||||
: selected_header;
|
||||
return;
|
||||
case "Escape":
|
||||
event.preventDefault();
|
||||
selected_header = false;
|
||||
break;
|
||||
case "Enter":
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!selected) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [i, j] = selected;
|
||||
|
||||
switch (event.key) {
|
||||
case "ArrowRight":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i][j + 1];
|
||||
selected = is_data ? is_data.id : selected;
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i][j - 1];
|
||||
selected = is_data ? is_data.id : selected;
|
||||
break;
|
||||
case "ArrowDown":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i + 1];
|
||||
selected = is_data ? is_data[j].id : selected;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
if (editing) break;
|
||||
event.preventDefault();
|
||||
is_data = data[i - 1];
|
||||
selected = is_data ? is_data[j].id : selected;
|
||||
move_cursor(event.key, [i, j]);
|
||||
break;
|
||||
|
||||
case "Escape":
|
||||
if (!editable) break;
|
||||
event.preventDefault();
|
||||
selected = editing;
|
||||
editing = false;
|
||||
break;
|
||||
case "Enter":
|
||||
@ -250,13 +268,15 @@
|
||||
if (event.shiftKey) {
|
||||
add_row(i);
|
||||
await tick();
|
||||
const [pos] = get_current_indices(id);
|
||||
selected = data[pos + 1][j].id;
|
||||
|
||||
selected = [i + 1, j];
|
||||
} else {
|
||||
if (editing === id) {
|
||||
if (dequal(editing, [i, j])) {
|
||||
editing = false;
|
||||
await tick();
|
||||
selected = [i, j];
|
||||
} else {
|
||||
start_edit(id);
|
||||
editing = [i, j];
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,73 +301,42 @@
|
||||
let is_data_x = data[i][j + direction];
|
||||
let is_data_y =
|
||||
data?.[i + direction]?.[direction > 0 ? 0 : _headers.length - 1];
|
||||
let _selected = is_data_x || is_data_y;
|
||||
if (_selected) {
|
||||
|
||||
if (is_data_x || is_data_y) {
|
||||
event.preventDefault();
|
||||
selected = _selected ? _selected.id : selected;
|
||||
selected = is_data_x
|
||||
? [i, j + direction]
|
||||
: [i + direction, direction > 0 ? 0 : _headers.length - 1];
|
||||
}
|
||||
editing = false;
|
||||
|
||||
break;
|
||||
default:
|
||||
if (!editable) break;
|
||||
if (
|
||||
(!editing || (editing && editing !== id)) &&
|
||||
(!editing || (editing && dequal(editing, [i, j]))) &&
|
||||
event.key.length === 1
|
||||
) {
|
||||
start_edit(id, true);
|
||||
clear_on_focus = true;
|
||||
editing = [i, j];
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_cell_click(id: string): Promise<void> {
|
||||
if (editing === id) return;
|
||||
if (selected === id) return;
|
||||
async function handle_cell_click(i: number, j: number): Promise<void> {
|
||||
if (dequal(editing, [i, j])) return;
|
||||
if (dequal(selected, [i, j])) return;
|
||||
header_edit = false;
|
||||
selected_header = false;
|
||||
editing = false;
|
||||
selected = id;
|
||||
selected = [i, j];
|
||||
await tick();
|
||||
parent.focus();
|
||||
}
|
||||
|
||||
async function set_focus(
|
||||
id: string | boolean,
|
||||
type: "edit" | "select"
|
||||
): Promise<void> {
|
||||
if (type === "edit" && typeof id == "string") {
|
||||
await tick();
|
||||
els[id].input?.focus();
|
||||
}
|
||||
|
||||
if (
|
||||
type === "edit" &&
|
||||
typeof id == "boolean" &&
|
||||
typeof selected === "string"
|
||||
) {
|
||||
let cell = els[selected]?.cell;
|
||||
await tick();
|
||||
cell?.focus();
|
||||
}
|
||||
|
||||
if (type === "select" && typeof id == "string") {
|
||||
const { cell } = els[id];
|
||||
await tick();
|
||||
cell?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
$: set_focus(editing, "edit");
|
||||
$: set_focus(selected, "select");
|
||||
|
||||
type SortDirection = "asc" | "des";
|
||||
let sort_direction: SortDirection;
|
||||
let sort_by: number;
|
||||
|
||||
function sort(col: number, dir: SortDirection): void {
|
||||
if (dir === "asc") {
|
||||
data = data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
|
||||
} else if (dir === "des") {
|
||||
data = data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
|
||||
}
|
||||
}
|
||||
let sort_direction: SortDirection | undefined;
|
||||
let sort_by: number | undefined;
|
||||
|
||||
function handle_sort(col: number): void {
|
||||
if (typeof sort_by !== "number" || sort_by !== col) {
|
||||
@ -360,30 +349,18 @@
|
||||
sort_direction = "asc";
|
||||
}
|
||||
}
|
||||
|
||||
sort(col, sort_direction);
|
||||
}
|
||||
|
||||
let header_edit: string | false;
|
||||
let header_edit: number | false;
|
||||
|
||||
function update_headers_data(): void {
|
||||
if (typeof selected === "string") {
|
||||
const new_header = els[selected].input?.value;
|
||||
if (_headers.find((i) => i.id === selected)) {
|
||||
let obj = _headers.find((i) => i.id === selected);
|
||||
if (new_header) obj!["value"] = new_header;
|
||||
} else {
|
||||
if (new_header) _headers.push({ id: selected, value: new_header });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function edit_header(_id: string, select?: boolean): Promise<void> {
|
||||
if (!editable || col_count[1] !== "dynamic" || editing === _id) return;
|
||||
header_edit = _id;
|
||||
await tick();
|
||||
els[_id].input?.focus();
|
||||
if (select) els[_id].input?.select();
|
||||
let select_on_focus = false;
|
||||
let selected_header: number | false = false;
|
||||
async function edit_header(i: number, _select = false): Promise<void> {
|
||||
if (!editable || col_count[1] !== "dynamic" || header_edit === i) return;
|
||||
selected = false;
|
||||
selected_header = i;
|
||||
header_edit = i;
|
||||
select_on_focus = _select;
|
||||
}
|
||||
|
||||
function end_header_edit(event: KeyboardEvent): void {
|
||||
@ -394,75 +371,65 @@
|
||||
case "Enter":
|
||||
case "Tab":
|
||||
event.preventDefault();
|
||||
selected = header_edit;
|
||||
selected = false;
|
||||
selected_header = header_edit;
|
||||
header_edit = false;
|
||||
update_headers_data();
|
||||
parent.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function add_row(index?: number): void {
|
||||
async function add_row(index?: number): Promise<void> {
|
||||
if (row_count[1] !== "dynamic") return;
|
||||
if (data.length === 0) {
|
||||
values = [Array(headers.length).fill("")];
|
||||
return;
|
||||
}
|
||||
|
||||
data.splice(
|
||||
index ? index + 1 : data.length,
|
||||
0,
|
||||
Array(data[0].length)
|
||||
.fill(0)
|
||||
.map((_, i) => {
|
||||
const _id = `${data.length}-${i}`;
|
||||
const _id = make_id();
|
||||
|
||||
els[_id] = { cell: null, input: null };
|
||||
return { id: _id, value: "" };
|
||||
})
|
||||
);
|
||||
|
||||
data = data;
|
||||
selected = [index ? index + 1 : data.length - 1, 0];
|
||||
}
|
||||
|
||||
async function add_col(): Promise<void> {
|
||||
if (col_count[1] !== "dynamic") return;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const _id = `${i}-${data[i].length}`;
|
||||
const _id = make_id();
|
||||
els[_id] = { cell: null, input: null };
|
||||
data[i].push({ id: _id, value: "" });
|
||||
}
|
||||
|
||||
const _id = `h-${_headers.length}`;
|
||||
els[_id] = { cell: null, input: null };
|
||||
_headers.push({ id: _id, value: `Header ${_headers.length + 1}` });
|
||||
headers.push(`Header ${headers.length + 1}`);
|
||||
|
||||
data = data;
|
||||
_headers = _headers;
|
||||
headers = headers;
|
||||
|
||||
await tick();
|
||||
|
||||
edit_header(_id, true);
|
||||
requestAnimationFrame(() => {
|
||||
edit_header(headers.length - 1, true);
|
||||
const new_w = parent.querySelectorAll("tbody")[1].offsetWidth;
|
||||
parent.querySelectorAll("table")[1].scrollTo({ left: new_w });
|
||||
});
|
||||
}
|
||||
|
||||
function handle_click_outside(event: Event): void {
|
||||
if (typeof editing === "string" && els[editing]) {
|
||||
if (
|
||||
els[editing].cell !== event.target &&
|
||||
!els[editing].cell?.contains(event?.target as Node | null)
|
||||
) {
|
||||
editing = false;
|
||||
}
|
||||
}
|
||||
editing = false;
|
||||
|
||||
if (typeof header_edit === "string" && els[header_edit]) {
|
||||
if (
|
||||
els[header_edit].cell !== event.target &&
|
||||
!els[header_edit].cell?.contains(event.target as Node | null)
|
||||
) {
|
||||
selected = header_edit;
|
||||
header_edit = false;
|
||||
update_headers_data();
|
||||
header_edit = false;
|
||||
}
|
||||
}
|
||||
header_edit = false;
|
||||
parent.focus();
|
||||
}
|
||||
|
||||
function guess_delimitaor(
|
||||
@ -527,11 +494,95 @@
|
||||
}
|
||||
|
||||
let dragging = false;
|
||||
|
||||
let t_width = 0;
|
||||
|
||||
function get_max(
|
||||
_d: { value: any; id: string }[][]
|
||||
): { value: any; id: string }[] {
|
||||
let max = _d[0].slice();
|
||||
for (let i = 0; i < _d.length; i++) {
|
||||
for (let j = 0; j < _d[i].length; j++) {
|
||||
if (`${max[j].value}`.length < `${_d[i][j].value}`.length) {
|
||||
max[j] = _d[i][j];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return max;
|
||||
}
|
||||
|
||||
$: max = get_max(data);
|
||||
|
||||
$: cells[0] && set_cell_widths();
|
||||
let cells: HTMLTableCellElement[] = [];
|
||||
let parent: HTMLDivElement;
|
||||
|
||||
function set_cell_widths(): void {
|
||||
const widths = cells.map((el, i) => {
|
||||
return el?.clientWidth || 0;
|
||||
});
|
||||
|
||||
if (widths.length === 0) return;
|
||||
for (let i = 0; i < widths.length; i++) {
|
||||
parent.style.setProperty(`--cell-width-${i}`, `${widths[i]}px`);
|
||||
}
|
||||
}
|
||||
|
||||
let table_height: number = height || 500;
|
||||
|
||||
function sort_data(
|
||||
_data: typeof data,
|
||||
col?: number,
|
||||
dir?: SortDirection
|
||||
): void {
|
||||
const id = selected ? data[selected[0]][selected[1]]?.id : null;
|
||||
if (typeof col !== "number" || !dir) {
|
||||
return;
|
||||
}
|
||||
if (dir === "asc") {
|
||||
_data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
|
||||
} else if (dir === "des") {
|
||||
_data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
|
||||
}
|
||||
|
||||
data = data;
|
||||
|
||||
if (id) {
|
||||
const [i, j] = get_current_indices(id);
|
||||
selected = [i, j];
|
||||
}
|
||||
}
|
||||
|
||||
$: sort_data(data, sort_by, sort_direction);
|
||||
|
||||
$: selected_index = !!selected && selected[0];
|
||||
|
||||
let is_visible = false;
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && !is_visible) {
|
||||
set_cell_widths();
|
||||
data = data;
|
||||
}
|
||||
|
||||
is_visible = entry.isIntersecting;
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(parent);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:click={handle_click_outside}
|
||||
on:touchstart={handle_click_outside}
|
||||
on:resize={() => set_cell_widths()}
|
||||
/>
|
||||
|
||||
<div class:label={label && label.length !== 0} use:copy>
|
||||
@ -541,11 +592,73 @@
|
||||
</p>
|
||||
{/if}
|
||||
<div
|
||||
bind:this={parent}
|
||||
class="table-wrap"
|
||||
class:dragging
|
||||
class:no-wrap={!wrap}
|
||||
style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
|
||||
style="height:{table_height}px"
|
||||
on:keydown={(e) => handle_keydown(e)}
|
||||
role="grid"
|
||||
tabindex="0"
|
||||
>
|
||||
<table bind:clientWidth={t_width}>
|
||||
{#if label && label.length !== 0}
|
||||
<caption class="sr-only">{label}</caption>
|
||||
{/if}
|
||||
<thead>
|
||||
<tr>
|
||||
{#each _headers as { value, id }, i (id)}
|
||||
<th
|
||||
class:editing={header_edit === i}
|
||||
aria-sort={get_sort_status(value, sort_by, sort_direction)}
|
||||
>
|
||||
<div class="cell-wrap">
|
||||
<EditableCell
|
||||
{value}
|
||||
{latex_delimiters}
|
||||
header
|
||||
edit={false}
|
||||
el={null}
|
||||
/>
|
||||
|
||||
<div
|
||||
class:sorted={sort_by === i}
|
||||
class:des={sort_by === i && sort_direction === "des"}
|
||||
class="sort-button {sort_direction} "
|
||||
>
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 9 7"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{#each max as { value, id }, j (id)}
|
||||
<td tabindex="-1" bind:this={cells[j]}>
|
||||
<div class="cell-wrap">
|
||||
<EditableCell
|
||||
{value}
|
||||
{latex_delimiters}
|
||||
datatype={Array.isArray(datatype) ? datatype[j] : datatype}
|
||||
edit={false}
|
||||
el={null}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Upload
|
||||
flex={false}
|
||||
center={false}
|
||||
@ -554,86 +667,85 @@
|
||||
on:load={(e) => blob_to_string(data_uri_to_blob(e.detail.data))}
|
||||
bind:dragging
|
||||
>
|
||||
<table class:dragging>
|
||||
<VirtualTable
|
||||
bind:items={data}
|
||||
table_width={t_width}
|
||||
max_height={height || 500}
|
||||
bind:actual_height={table_height}
|
||||
selected={selected_index}
|
||||
>
|
||||
{#if label && label.length !== 0}
|
||||
<caption class="sr-only">{label}</caption>
|
||||
{/if}
|
||||
<thead>
|
||||
<tr>
|
||||
{#each _headers as { value, id }, i (id)}
|
||||
<th
|
||||
bind:this={els[id].cell}
|
||||
class:editing={header_edit === id}
|
||||
aria-sort={get_sort_status(value, sort_by, sort_direction)}
|
||||
>
|
||||
<div class="cell-wrap">
|
||||
<EditableCell
|
||||
{value}
|
||||
{latex_delimiters}
|
||||
bind:el={els[id].input}
|
||||
edit={header_edit === id}
|
||||
on:keydown={end_header_edit}
|
||||
on:dblclick={() => edit_header(id)}
|
||||
header
|
||||
/>
|
||||
<tr slot="thead">
|
||||
{#each _headers as { value, id }, i (id)}
|
||||
<th
|
||||
class:focus={header_edit === i || selected_header === i}
|
||||
aria-sort={get_sort_status(value, sort_by, sort_direction)}
|
||||
style="width: var(--cell-width-{i});"
|
||||
>
|
||||
<div class="cell-wrap">
|
||||
<EditableCell
|
||||
bind:value={_headers[i].value}
|
||||
bind:el={els[id].input}
|
||||
{latex_delimiters}
|
||||
edit={header_edit === i}
|
||||
on:keydown={end_header_edit}
|
||||
on:dblclick={() => edit_header(i)}
|
||||
{select_on_focus}
|
||||
header
|
||||
/>
|
||||
|
||||
<!-- TODO: fix -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions-->
|
||||
<div
|
||||
class:sorted={sort_by === i}
|
||||
class:des={sort_by === i && sort_direction === "des"}
|
||||
class="sort-button {sort_direction} "
|
||||
on:click={() => handle_sort(i)}
|
||||
>
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 9 7"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each data as row, i (row)}
|
||||
<tr>
|
||||
{#each row as { value, id }, j (id)}
|
||||
<td
|
||||
tabindex="0"
|
||||
bind:this={els[id].cell}
|
||||
on:touchstart={() => start_edit(id)}
|
||||
on:click={() => handle_cell_click(id)}
|
||||
on:dblclick={() => start_edit(id)}
|
||||
on:keydown={(e) => handle_keydown(e, i, j, id)}
|
||||
<!-- TODO: fix -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions-->
|
||||
<div
|
||||
class:sorted={sort_by === i}
|
||||
class:des={sort_by === i && sort_direction === "des"}
|
||||
class="sort-button {sort_direction} "
|
||||
on:click={() => handle_sort(i)}
|
||||
>
|
||||
<div
|
||||
class:border-transparent={selected !== id}
|
||||
class="cell-wrap"
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 9 7"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<EditableCell
|
||||
bind:value
|
||||
bind:el={els[id].input}
|
||||
{latex_delimiters}
|
||||
edit={editing === id}
|
||||
datatype={Array.isArray(datatype)
|
||||
? datatype[j]
|
||||
: datatype}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</tr>
|
||||
|
||||
<tr slot="tbody" let:item let:index class:row_odd={index % 2 === 0}>
|
||||
{#each item as { value, id }, j (id)}
|
||||
<td
|
||||
tabindex="0"
|
||||
on:touchstart={() => start_edit(index, j)}
|
||||
on:click={() => handle_cell_click(index, j)}
|
||||
on:dblclick={() => start_edit(index, j)}
|
||||
style="width: var(--cell-width-{j});"
|
||||
class:focus={dequal(selected, [index, j])}
|
||||
>
|
||||
<div class="cell-wrap">
|
||||
<EditableCell
|
||||
bind:value={data[index][j].value}
|
||||
bind:el={els[id].input}
|
||||
{latex_delimiters}
|
||||
edit={dequal(editing, [index, j])}
|
||||
datatype={Array.isArray(datatype) ? datatype[j] : datatype}
|
||||
on:focus={() => parent.focus()}
|
||||
on:blur={() => ((clear_on_focus = false), parent.focus())}
|
||||
{clear_on_focus}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
</VirtualTable>
|
||||
</Upload>
|
||||
</div>
|
||||
{#if editable}
|
||||
@ -709,8 +821,12 @@
|
||||
transition: 150ms;
|
||||
border: 1px solid var(--border-color-primary);
|
||||
border-radius: var(--table-radius);
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-wrap:focus-within {
|
||||
outline: none;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.dragging {
|
||||
@ -722,18 +838,16 @@
|
||||
}
|
||||
|
||||
table {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: 150ms;
|
||||
width: var(--size-full);
|
||||
table-layout: auto;
|
||||
overflow: hidden;
|
||||
color: var(--body-text-color);
|
||||
font-size: var(--input-text-size);
|
||||
line-height: var(--line-md);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
table.dragging {
|
||||
opacity: 0.4;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
@ -773,8 +887,8 @@
|
||||
border-top-right-radius: var(--table-radius);
|
||||
}
|
||||
|
||||
th:focus-within,
|
||||
td:focus-within {
|
||||
th.focus,
|
||||
td.focus {
|
||||
--ring-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@ -819,26 +933,6 @@
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
tbody {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
tbody > tr:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(even) {
|
||||
background: var(--table-even-background-fill);
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd) {
|
||||
background: var(--table-odd-background-fill);
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd):focus {
|
||||
background: var(--background-fill-primary);
|
||||
}
|
||||
|
||||
.editing {
|
||||
background: var(--table-editing);
|
||||
}
|
||||
@ -860,4 +954,12 @@
|
||||
.controls-wrap > * + * {
|
||||
margin-left: var(--size-1);
|
||||
}
|
||||
|
||||
.row_odd {
|
||||
background: var(--table-odd-background-fill);
|
||||
}
|
||||
|
||||
.row_odd.focus {
|
||||
background: var(--background-fill-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
314
js/dataframe/shared/VirtualTable.svelte
Normal file
314
js/dataframe/shared/VirtualTable.svelte
Normal file
@ -0,0 +1,314 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from "svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
export let items: any[][] = [];
|
||||
|
||||
export let table_width: number;
|
||||
export let max_height: number;
|
||||
export let actual_height: number;
|
||||
export let start = 0;
|
||||
export let end = 0;
|
||||
export let selected: number | false;
|
||||
let height = "100%";
|
||||
|
||||
let average_height: number;
|
||||
let bottom = 0;
|
||||
let contents: HTMLTableSectionElement;
|
||||
let head_height = 0;
|
||||
let foot_height = 0;
|
||||
let height_map: number[] = [];
|
||||
let mounted: boolean;
|
||||
let rows: HTMLCollectionOf<HTMLTableRowElement>;
|
||||
let top = 0;
|
||||
let viewport: HTMLTableElement;
|
||||
let viewport_height = 0;
|
||||
let visible: { index: number; data: any[] }[] = [];
|
||||
|
||||
$: if (mounted) requestAnimationFrame(() => refresh_height_map(sortedItems));
|
||||
|
||||
let content_height = 0;
|
||||
async function refresh_height_map(_items: typeof items): Promise<void> {
|
||||
if (viewport_height === 0 || table_width === 0) {
|
||||
return;
|
||||
}
|
||||
const { scrollTop } = viewport;
|
||||
|
||||
content_height = top - (scrollTop - head_height);
|
||||
let i = start;
|
||||
|
||||
while (content_height < max_height && i < _items.length) {
|
||||
let row = rows[i - start];
|
||||
if (!row) {
|
||||
end = i + 1;
|
||||
await tick(); // render the newly visible row
|
||||
row = rows[i - start];
|
||||
}
|
||||
let _h = row?.getBoundingClientRect().height;
|
||||
if (!_h) {
|
||||
_h = average_height;
|
||||
}
|
||||
const row_height = (height_map[i] = _h);
|
||||
content_height += row_height;
|
||||
i += 1;
|
||||
}
|
||||
|
||||
end = i;
|
||||
const remaining = _items.length - end;
|
||||
|
||||
let filtered_height_map = height_map.filter((v) => typeof v === "number");
|
||||
average_height =
|
||||
filtered_height_map.reduce((a, b) => a + b, 0) /
|
||||
filtered_height_map.length;
|
||||
|
||||
bottom = remaining * average_height;
|
||||
height_map.length = _items.length;
|
||||
|
||||
await tick();
|
||||
if (!max_height) {
|
||||
actual_height = content_height + 1;
|
||||
} else if (content_height < max_height) {
|
||||
actual_height = content_height + 2;
|
||||
} else {
|
||||
actual_height = max_height;
|
||||
}
|
||||
|
||||
await tick();
|
||||
}
|
||||
|
||||
$: scroll_and_render(selected);
|
||||
async function scroll_and_render(n: number | false): Promise<void> {
|
||||
requestAnimationFrame(async () => {
|
||||
if (typeof n !== "number") return;
|
||||
const direction = typeof n !== "number" ? false : is_in_view(n);
|
||||
if (direction === true) {
|
||||
return;
|
||||
}
|
||||
if (direction === "back") {
|
||||
await scroll_to_index(n, { behavior: "instant" });
|
||||
}
|
||||
|
||||
if (direction === "forwards") {
|
||||
await scroll_to_index(n, { behavior: "instant" }, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function is_in_view(n: number): "back" | "forwards" | true {
|
||||
const current = rows && rows[n - start];
|
||||
if (!current && n < start) {
|
||||
return "back";
|
||||
}
|
||||
if (!current && n >= end - 1) {
|
||||
return "forwards";
|
||||
}
|
||||
|
||||
const { top, bottom } = current.getBoundingClientRect();
|
||||
if (top < 37) {
|
||||
return "back";
|
||||
}
|
||||
if (bottom > viewport_height) {
|
||||
return "forwards";
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function get_computed_px_amount(elem: HTMLElement, property: string): number {
|
||||
if (!elem) {
|
||||
return 0;
|
||||
}
|
||||
const compStyle = getComputedStyle(elem);
|
||||
|
||||
let x = parseInt(compStyle.getPropertyValue(property));
|
||||
return x;
|
||||
}
|
||||
|
||||
async function handle_scroll(e: Event): Promise<void> {
|
||||
const scroll_top = viewport.scrollTop;
|
||||
|
||||
rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
|
||||
const is_start_overflow = sortedItems.length < start;
|
||||
|
||||
const row_top_border = get_computed_px_amount(rows[1], "border-top-width");
|
||||
|
||||
const actual_border_collapsed_width = 0;
|
||||
|
||||
if (is_start_overflow) {
|
||||
await scroll_to_index(sortedItems.length - 1, { behavior: "auto" });
|
||||
}
|
||||
|
||||
let new_start = 0;
|
||||
// acquire height map for currently visible rows
|
||||
for (let v = 0; v < rows.length; v += 1) {
|
||||
height_map[start + v] = rows[v].getBoundingClientRect().height;
|
||||
}
|
||||
let i = 0;
|
||||
// start from top: thead, with its borders, plus the first border to afterwards neglect
|
||||
let y = head_height + row_top_border / 2;
|
||||
let row_heights = [];
|
||||
// loop items to find new start
|
||||
while (i < sortedItems.length) {
|
||||
const row_height = height_map[i] || average_height;
|
||||
row_heights[i] = row_height;
|
||||
// we only want to jump if the full (incl. border) row is away
|
||||
if (y + row_height + actual_border_collapsed_width > scroll_top) {
|
||||
// this is the last index still inside the viewport
|
||||
new_start = i;
|
||||
top = y - (head_height + row_top_border / 2);
|
||||
break;
|
||||
}
|
||||
y += row_height;
|
||||
i += 1;
|
||||
}
|
||||
|
||||
new_start = Math.max(0, new_start);
|
||||
while (i < sortedItems.length) {
|
||||
const row_height = height_map[i] || average_height;
|
||||
y += row_height;
|
||||
i += 1;
|
||||
if (y > scroll_top + viewport_height) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
start = new_start;
|
||||
end = i;
|
||||
const remaining = sortedItems.length - end;
|
||||
if (end === 0) {
|
||||
end = 10;
|
||||
}
|
||||
average_height = (y - head_height) / end;
|
||||
let remaining_height = remaining * average_height; // 0
|
||||
// compute height map for remaining items
|
||||
while (i < sortedItems.length) {
|
||||
i += 1;
|
||||
height_map[i] = average_height;
|
||||
}
|
||||
bottom = remaining_height;
|
||||
if (!isFinite(bottom)) {
|
||||
bottom = 200000;
|
||||
}
|
||||
}
|
||||
|
||||
export async function scroll_to_index(
|
||||
index: number,
|
||||
opts: ScrollToOptions,
|
||||
align_end = false
|
||||
): Promise<void> {
|
||||
await tick();
|
||||
|
||||
const _itemHeight = average_height;
|
||||
|
||||
let distance = index * _itemHeight;
|
||||
if (align_end) {
|
||||
distance = distance - viewport_height + _itemHeight + head_height;
|
||||
}
|
||||
const _opts = {
|
||||
top: distance,
|
||||
behavior: "smooth" as ScrollBehavior,
|
||||
...opts
|
||||
};
|
||||
|
||||
viewport.scrollTo(_opts);
|
||||
}
|
||||
|
||||
$: sortedItems = items;
|
||||
|
||||
$: visible = sortedItems.slice(start, end).map((data, i) => {
|
||||
return { index: i + start, data };
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
rows = contents.children as HTMLCollectionOf<HTMLTableRowElement>;
|
||||
mounted = true;
|
||||
refresh_height_map(items);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte-virtual-table-viewport>
|
||||
<table
|
||||
class="table"
|
||||
bind:this={viewport}
|
||||
bind:offsetHeight={viewport_height}
|
||||
on:scroll={handle_scroll}
|
||||
style="height: {height}; --bw-svt-p-top: {top}px; --bw-svt-p-bottom: {bottom}px; --bw-svt-head-height: {head_height}px; --bw-svt-foot-height: {foot_height}px; --bw-svt-avg-row-height: {average_height}px"
|
||||
>
|
||||
<thead class="thead" bind:offsetHeight={head_height}>
|
||||
<slot name="thead" />
|
||||
</thead>
|
||||
<tbody bind:this={contents} class="tbody">
|
||||
{#if visible.length && visible[0].data.length}
|
||||
{#each visible as item (item.data[0].id)}
|
||||
<slot name="tbody" item={item.data} index={item.index}>
|
||||
Missing Table Row
|
||||
</slot>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
<tfoot class="tfoot" bind:offsetHeight={foot_height}>
|
||||
<slot name="tfoot" />
|
||||
</tfoot>
|
||||
</table>
|
||||
</svelte-virtual-table-viewport>
|
||||
|
||||
<style type="text/css">
|
||||
table {
|
||||
position: relative;
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--body-text-color);
|
||||
font-size: var(--input-text-size);
|
||||
line-height: var(--line-md);
|
||||
font-family: var(--font-mono);
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
table :is(thead, tfoot, tbody) {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tbody {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
table tbody {
|
||||
padding-top: var(--bw-svt-p-top);
|
||||
padding-bottom: var(--bw-svt-p-bottom);
|
||||
}
|
||||
tbody {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid currentColor;
|
||||
}
|
||||
|
||||
tbody > :global(tr:last-child) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table :global(td) {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
tbody > :global(tr:nth-child(even)) {
|
||||
background: var(--table-even-background-fill);
|
||||
}
|
||||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--layer-1);
|
||||
box-shadow: var(--shadow-drop);
|
||||
}
|
||||
</style>
|
||||
@ -56,6 +56,18 @@
|
||||
handle_change();
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
(Array.isArray(value) && value?.[0]?.length === 0) ||
|
||||
value.data?.[0]?.length === 0
|
||||
) {
|
||||
value = {
|
||||
data: [Array(col_count?.[0] || 3).fill("")],
|
||||
headers: Array(col_count?.[0] || 3)
|
||||
.fill("")
|
||||
.map((_, i) => `${i + 1}`)
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Block
|
||||
@ -68,7 +80,7 @@
|
||||
{min_width}
|
||||
allow_overflow={false}
|
||||
>
|
||||
<StatusTracker {...loading_status} />
|
||||
<StatusTracker {...loading_status} border={true} />
|
||||
<Table
|
||||
{label}
|
||||
{row_count}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
left: string;
|
||||
right: string;
|
||||
display: boolean;
|
||||
}[];
|
||||
}[] = [];
|
||||
|
||||
let el: HTMLSpanElement;
|
||||
let html: string;
|
||||
|
||||
@ -66,6 +66,7 @@
|
||||
export let loading_text = "Loading...";
|
||||
export let absolute = true;
|
||||
export let translucent = false;
|
||||
export let border = false;
|
||||
|
||||
let el: HTMLDivElement;
|
||||
|
||||
@ -190,6 +191,7 @@
|
||||
translucent ||
|
||||
show_progress === "minimal"}
|
||||
class:generating={status === "generating"}
|
||||
class:border
|
||||
style:position={absolute ? "absolute" : "static"}
|
||||
style:padding={absolute ? "0" : "var(--size-8) 0"}
|
||||
bind:this={el}
|
||||
@ -413,4 +415,8 @@
|
||||
.minimal .progress-text {
|
||||
background: var(--block-background-fill);
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid var(--border-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -79,7 +79,7 @@ sup {
|
||||
|
||||
table {
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user