vastgrid 0.0.0-stage → 0.1.0

package/dist/text.js

@@ -0,0 +1,63 @@
+const ELLIPSIS = "…";
+const MAX_ENTRIES = 20_000;
+/** Measures and shortens text for one font, caching results because the same strings repeat a lot. */
+export class TextFitter {
+    context;
+    font;
+    widths = new Map();
+    fits = new Map();
+    ellipsisWidth = -1;
+    constructor(context, font) {
+        this.context = context;
+        this.font = font;
+    }
+    /** Width of `text`. The caller must have set `context.font` to this fitter's font. */
+    width(text) {
+        let width = this.widths.get(text);
+        if (width === undefined) {
+            width = this.context.measureText(text).width;
+            if (this.widths.size > MAX_ENTRIES)
+                this.widths.clear();
+            this.widths.set(text, width);
+        }
+        return width;
+    }
+    /** `text`, shortened with "…" to fit in `maxWidth`. */
+    fit(text, maxWidth) {
+        if (maxWidth <= 0 || text === "")
+            return "";
+        // Cells never show more than a few hundred characters; skip measuring the rest.
+        const source = text.length > 400 ? text.slice(0, 400) : text;
+        if (source === text && this.width(text) <= maxWidth)
+            return text;
+        const key = `${Math.floor(maxWidth)}\u0001${source}`;
+        const cached = this.fits.get(key);
+        if (cached !== undefined)
+            return cached;
+        if (this.ellipsisWidth < 0)
+            this.ellipsisWidth = this.context.measureText(ELLIPSIS).width;
+        let result = "";
+        if (this.ellipsisWidth <= maxWidth) {
+            const full = this.context.measureText(source).width;
+            let low = 0;
+            let high = Math.min(source.length, Math.ceil((source.length * maxWidth) / Math.max(1, full)) + 4);
+            while (low < high) {
+                const middle = (low + high + 1) >> 1;
+                if (this.context.measureText(source.slice(0, middle)).width + this.ellipsisWidth <= maxWidth)
+                    low = middle;
+                else
+                    high = middle - 1;
+            }
+            // Do not split a surrogate pair.
+            const code = source.charCodeAt(low - 1);
+            if (low > 0 && code >= 0xd800 && code <= 0xdbff)
+                low--;
+            result = `${source.slice(0, low)}${ELLIPSIS}`;
+        }
+        if (this.fits.size > MAX_ENTRIES)
+            this.fits.clear();
+        this.fits.set(key, result);
+        return result;
+    }
+}
+//# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"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"}

package/dist/theme.d.ts

@@ -0,0 +1,32 @@
+/** Colors and fonts for the canvas, read from the CSS custom properties of the grid's root element. */
+export interface GridTheme {
+    font: string;
+    headerFont: string;
+    smallFont: string;
+    fontSize: number;
+    fontFamily: string;
+    background: string;
+    text: string;
+    muted: string;
+    headerBackground: string;
+    headerText: string;
+    headerActive: string;
+    gutterBackground: string;
+    gutterText: string;
+    gutterViewText: string;
+    line: string;
+    lineStrong: string;
+    selection: string;
+    selectionBorder: string;
+    activeBorder: string;
+    accent: string;
+    nullText: string;
+    placeholder: string;
+    match: string;
+    error: string;
+}
+/** Resolves the theme of `root`. Colors given as `light-dark()` or system colors resolve to concrete values. */
+export declare function resolveTheme(root: HTMLElement): GridTheme;
+/** Reads a length custom property in pixels, or `fallback`. */
+export declare function cssLength(root: HTMLElement, token: string, fallback: number): number;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AA2BD,gHAAgH;AAChH,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,CA4BzD;AAED,+DAA+D;AAC/D,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAG3E"}

package/dist/theme.js

@@ -0,0 +1,54 @@
+const colorTokens = {
+    background: "--vg-bg",
+    text: "--vg-fg",
+    muted: "--vg-muted",
+    headerBackground: "--vg-header-bg",
+    headerText: "--vg-header-fg",
+    headerActive: "--vg-header-active-bg",
+    gutterBackground: "--vg-gutter-bg",
+    gutterText: "--vg-gutter-fg",
+    gutterViewText: "--vg-gutter-view-fg",
+    line: "--vg-line",
+    lineStrong: "--vg-line-strong",
+    selection: "--vg-selection-bg",
+    selectionBorder: "--vg-selection-border",
+    activeBorder: "--vg-active-border",
+    accent: "--vg-accent",
+    nullText: "--vg-null-fg",
+    placeholder: "--vg-placeholder",
+    match: "--vg-match-bg",
+    error: "--vg-error-fg",
+};
+/** Resolves the theme of `root`. Colors given as `light-dark()` or system colors resolve to concrete values. */
+export function resolveTheme(root) {
+    const probe = document.createElement("span");
+    probe.style.display = "none";
+    root.appendChild(probe);
+    try {
+        const color = (token) => {
+            probe.style.color = `var(${token})`;
+            return getComputedStyle(probe).color;
+        };
+        const style = getComputedStyle(root);
+        const fontFamily = style.getPropertyValue("--vg-font-family").trim() || style.fontFamily || "system-ui, sans-serif";
+        const fontSize = Number.parseFloat(style.getPropertyValue("--vg-font-size")) || Number.parseFloat(style.fontSize) || 13;
+        const colors = Object.fromEntries(Object.entries(colorTokens).map(([key, token]) => [key, color(token)]));
+        return {
+            ...colors,
+            fontFamily,
+            fontSize,
+            font: `${fontSize}px ${fontFamily}`,
+            headerFont: `600 ${fontSize}px ${fontFamily}`,
+            smallFont: `${Math.max(9, fontSize - 2)}px ${fontFamily}`,
+        };
+    }
+    finally {
+        probe.remove();
+    }
+}
+/** Reads a length custom property in pixels, or `fallback`. */
+export function cssLength(root, token, fallback) {
+    const value = Number.parseFloat(getComputedStyle(root).getPropertyValue(token));
+    return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,GAGb;IACF,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,gBAAgB,EAAE,gBAAgB;IAClC,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,uBAAuB;IACrC,gBAAgB,EAAE,gBAAgB;IAClC,UAAU,EAAE,gBAAgB;IAC5B,cAAc,EAAE,qBAAqB;IACrC,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,kBAAkB;IAC9B,SAAS,EAAE,mBAAmB;IAC9B,eAAe,EAAE,uBAAuB;IACxC,YAAY,EAAE,oBAAoB;IAClC,MAAM,EAAE,aAAa;IACrB,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,kBAAkB;IAC/B,KAAK,EAAE,eAAe;IACtB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,gHAAgH;AAChH,MAAM,UAAU,YAAY,CAAC,IAAiB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE;YAC9B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,GAAG,CAAC;YACpC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACvC,CAAC,CAAC;QACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,uBAAuB,CAAC;QACpH,MAAM,QAAQ,GACZ,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACzG,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAGvG,CAAC;QACF,OAAO;YACL,GAAG,MAAM;YACT,UAAU;YACV,QAAQ;YACR,IAAI,EAAE,GAAG,QAAQ,MAAM,UAAU,EAAE;YACnC,UAAU,EAAE,OAAO,QAAQ,MAAM,UAAU,EAAE;YAC7C,SAAS,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,MAAM,UAAU,EAAE;SAC1D,CAAC;IACJ,CAAC;YAAS,CAAC;QACT,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;AACH,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,SAAS,CAAC,IAAiB,EAAE,KAAa,EAAE,QAAgB;IAC1E,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAChE,CAAC"}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "vastgrid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A canvas data grid for React that opens CSV, TSV, Parquet and JSON Lines files of any size, with spreadsheet selection, sorting, filters and statistics.",
+  "license": "MIT",
+  "author": "yhay81",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yhay81/vastgrid.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/yhay81/vastgrid#readme",
+  "bugs": "https://github.com/yhay81/vastgrid/issues",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "vastgrid-source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "vastgrid-source": "./src/styles.css",
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "datagrid",
+    "data-grid",
+    "canvas",
+    "spreadsheet",
+    "csv",
+    "parquet",
+    "virtual-scroll",
+    "big-data"
+  ],
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "vastgrid-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/src/components/bars.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState } from "react";
+import type { GridController } from "../controller.js";
+import { countFormat, filterLabel, numberFormat } from "../labels.js";
+import type { Messages } from "../messages.js";
+
+/** Search box, active sort and filters, row count and the columns button. */
+export function Toolbar({
+  controller,
+  messages,
+  onColumns,
+}: {
+  controller: GridController;
+  messages: Messages;
+  onColumns: (button: HTMLButtonElement) => void;
+}) {
+  const query = controller.query;
+  const [search, setSearch] = useState(query.search ?? "");
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const applied = query.search ?? "";
+  const lastApplied = useRef(applied);
+  // Follow changes made elsewhere (for example "Clear all").
+  if (applied !== lastApplied.current) {
+    lastApplied.current = applied;
+    if (search !== applied) setSearch(applied);
+  }
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const ready = controller.info?.status === "ready";
+  const capabilities = controller.info?.capabilities;
+  const count = countFormat(controller.options.locale);
+  const filters = query.filters ?? [];
+  const sort = query.sort ?? [];
+  const total = controller.totalRows;
+  const filtered = controller.view.id !== null && (filters.length > 0 || Boolean(query.search?.trim()));
+  let rows: string;
+  if (controller.info?.status === "loading") {
+    const progress = controller.info.progress;
+    rows =
+      progress !== null && progress !== undefined && progress > 0
+        ? messages.loadingProgress(`${Math.round(progress * 100)}%`)
+        : messages.loadingRows(count(controller.readableRows));
+  } else if (filtered && total !== null) {
+    rows = messages.rowsOf(count(controller.rowCount), count(total));
+  } else {
+    rows = messages.rows(count(controller.rowCount));
+  }
+
+  function change(value: string) {
+    setSearch(value);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => controller.setSearch(value), 350);
+  }
+
+  return (
+    <div className="vg-toolbar">
+      <input
+        type="search"
+        className="vg-input vg-toolbar__search"
+        placeholder={messages.searchPlaceholder}
+        aria-label={messages.search}
+        value={search}
+        disabled={!ready || !capabilities?.search}
+        onChange={(event) => change(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            clearTimeout(timer.current);
+            controller.setSearch(search);
+          }
+        }}
+      />
+      {sort.length > 0 && (
+        <span className="vg-chip">
+          <span>
+            {messages.sortedBy(
+              sort
+                .map(
+                  (key) =>
+                    `${controller.schema[key.column]?.name ?? key.column} ${key.direction === "asc" ? "↑" : "↓"}`,
+                )
+                .join(", "),
+            )}
+          </span>
+          <button
+            type="button"
+            className="vg-chip__remove"
+            aria-label={messages.clearSort}
+            title={messages.clearSort}
+            onClick={() => controller.clearSort()}
+          >
+            ×
+          </button>
+        </span>
+      )}
+      {filters.map((filter) => {
+        const label = filterLabel(filter, controller.schema[filter.column], controller.formatter, messages);
+        return (
+          <span className="vg-chip vg-chip--filter" key={filter.column}>
+            <span title={label}>{label}</span>
+            <button
+              type="button"
+              className="vg-chip__remove"
+              aria-label={messages.removeFilter(label)}
+              title={messages.removeFilter(label)}
+              onClick={() => controller.setFilter(filter.column, null)}
+            >
+              ×
+            </button>
+          </span>
+        );
+      })}
+      {(filters.length > 0 || Boolean(query.search?.trim())) && (
+        <button type="button" className="vg-button vg-button--small" onClick={() => controller.clearFilters()}>
+          {messages.clearFilters}
+        </button>
+      )}
+      <span className="vg-toolbar__spacer" />
+      <span className="vg-toolbar__count" aria-live="polite">
+        {controller.viewPending ? messages.buildingView : rows}
+      </span>
+      <button
+        type="button"
+        className="vg-button vg-button--small"
+        onClick={(event) => onColumns(event.currentTarget)}
+        disabled={!controller.info}
+      >
+        {messages.columns}
+      </button>
+    </div>
+  );
+}
+
+/** The active cell and, for multi-cell selections, count, sum, average, minimum and maximum. */
+export function StatusBar({ controller, messages }: { controller: GridController; messages: Messages }) {
+  const count = countFormat(controller.options.locale);
+  const number = numberFormat(controller.options.locale);
+  const active = controller.selection.active;
+  const schema = controller.columnSchema(active.col);
+  const summary = controller.summary;
+  const label = controller.rowLabel(active.row);
+  const notes = (controller.info?.notes ?? []).map((note) => messages.notes[note] ?? note);
+  return (
+    <div className="vg-statusbar">
+      {controller.rowCount > 0 && schema && (
+        <span className="vg-statusbar__cell">
+          {messages.cell(count(active.row + 1), schema.name)}
+          {controller.view.id !== null && label !== null && (
+            <span className="vg-statusbar__muted"> · {messages.originalRow(count(label))}</span>
+          )}
+        </span>
+      )}
+      {notes.length > 0 && <span className="vg-statusbar__note">{notes.join(" ")}</span>}
+      <span className="vg-toolbar__spacer" />
+      {summary && (
+        <span className="vg-statusbar__summary">
+          <span>
+            {messages.summary.count}: {count(summary.count)}
+          </span>
+          {summary.numericCount > 0 && summary.sum !== null && (
+            <>
+              <span>
+                {messages.summary.average}: {number(summary.average ?? 0)}
+              </span>
+              <span>
+                {messages.summary.min}: {number(summary.min ?? 0)}
+              </span>
+              <span>
+                {messages.summary.max}: {number(summary.max ?? 0)}
+              </span>
+              <span>
+                {messages.summary.sum}: {number(summary.sum)}
+              </span>
+            </>
+          )}
+        </span>
+      )}
+      {!summary && controller.summaryPending && <span className="vg-statusbar__muted">…</span>}
+    </div>
+  );
+}

package/src/components/cell-inspector.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { type CellValue, type ColumnSchema, isAbortError, plainText } from "vastgrid-core";
+import type { Messages } from "../messages.js";
+
+/** Pretty-prints JSON text; returns null when the text is not a JSON object or array. */
+function prettyJson(text: string) {
+  const trimmed = text.trim();
+  if (!(trimmed.startsWith("{") || trimmed.startsWith("["))) return null;
+  try {
+    return JSON.stringify(JSON.parse(trimmed), null, 2);
+  } catch {
+    return null;
+  }
+}
+
+/** The full value of a cell, with line breaks, JSON formatting and a copy button. */
+export function CellInspector({
+  schema,
+  messages,
+  location,
+  load,
+  onCopy,
+}: {
+  schema: ColumnSchema;
+  messages: Messages;
+  location: string;
+  load: (signal: AbortSignal) => Promise<CellValue>;
+  onCopy: (text: string) => void;
+}) {
+  const [value, setValue] = useState<{ text: string; isNull: boolean } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    load(controller.signal)
+      .then((result) => {
+        if (!controller.signal.aborted) setValue({ text: plainText(result), isNull: result === null });
+      })
+      .catch((cause: unknown) => {
+        if (controller.signal.aborted || isAbortError(cause)) return;
+        setError(cause instanceof Error ? cause.message : String(cause));
+      });
+    return () => controller.abort();
+  }, [load]);
+
+  const json = value ? prettyJson(value.text) : null;
+  return (
+    <div className="vg-inspector">
+      <p className="vg-panel__title">
+        {schema.name}
+        <span className="vg-panel__muted">
+          {" "}
+          · {location} · {messages.types[schema.type] ?? schema.type}
+        </span>
+      </p>
+      {error && <p className="vg-panel__error">{error}</p>}
+      {!value && !error && <p className="vg-panel__muted">{messages.loading}</p>}
+      {value && (
+        <pre className="vg-inspector__value" data-null={value.isNull || undefined}>
+          {value.isNull ? "NULL" : (json ?? value.text)}
+        </pre>
+      )}
+      <div className="vg-panel__actions">
+        <button type="button" className="vg-button" disabled={!value} onClick={() => value && onCopy(value.text)}>
+          {messages.copy}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/columns-panel.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import type { ColumnSchema } from "vastgrid-core";
+import type { ColumnState } from "../controller.js";
+import type { Messages } from "../messages.js";
+
+/** Shows and hides columns. */
+export function ColumnsPanel({
+  columns,
+  schema,
+  messages,
+  onToggle,
+  onShowAll,
+}: {
+  columns: ColumnState[];
+  schema: ColumnSchema[];
+  messages: Messages;
+  onToggle: (index: number, hidden: boolean) => void;
+  onShowAll: () => void;
+}) {
+  const [search, setSearch] = useState("");
+  const needle = search.trim().toLowerCase();
+  const visibleCount = columns.filter((column) => !column.hidden).length;
+  const shown = columns.filter(
+    (column) => !needle || (schema[column.index]?.name ?? "").toLowerCase().includes(needle),
+  );
+  return (
+    <div className="vg-columns">
+      <p className="vg-panel__title">{messages.columns}</p>
+      <input
+        type="search"
+        className="vg-input"
+        placeholder={messages.search}
+        aria-label={messages.search}
+        value={search}
+        data-autofocus
+        onChange={(event) => setSearch(event.target.value)}
+      />
+      <div className="vg-filter__values">
+        {shown.map((column) => (
+          <label className="vg-check" key={column.index}>
+            <input
+              type="checkbox"
+              checked={!column.hidden}
+              disabled={!column.hidden && visibleCount <= 1}
+              onChange={(event) => onToggle(column.index, !event.target.checked)}
+            />
+            <span className="vg-check__label">{schema[column.index]?.name}</span>
+            <span className="vg-check__count">{messages.types[schema[column.index]?.type ?? "unknown"]}</span>
+          </label>
+        ))}
+      </div>
+      <div className="vg-panel__actions">
+        <button type="button" className="vg-button" onClick={onShowAll} disabled={visibleCount === columns.length}>
+          {messages.showAllColumns}
+        </button>
+      </div>
+    </div>
+  );
+}