Простая и легкая таблица

Таблица для отображения в браузере большиш наборов данных на чистом JS/TS.

Ключевые особенности проекта

• высокая скорость рендера. Достигается за счет использования нативного браузерного скролла, виртуализации и прямых малозатратных манипуляций в DOM на чистом JS.
• легковесность. Библиотека мало добавляет к объему бандла и имеет малые накладные расходы по памяти, так как не клонирует входящие данные, а совственный стэйт очень мал.
• хорошая универсальность. Можно применять в проектах на чистом JS или вместе с любимым клиентским фреймворком.

Внимание!

В настоящий момент поддержка SSR отсутствует и работа осуществляется только на клиенте.

Установка и использование

Импорт

npm install simple_easy_table

Привязка к HTML

<div class="table"></div>

src/main.ts

// Ваши импорты из SimpleEasyTable и др.
import { CheckedRows, SelectRow } from "../customEvents";
import { SimpleEasyTable } from "../main";
import { Column } from "../types";
import "./style.scss";

// Пользовательская функция трансформации значений (форматирование дат, перевод, извлечение значений из сторонних массивов и объектов, ...) в строку
export const textExtractor = (input: string): string => {
  return (
    {
      Sindhi: "синдхи",
      Uyghur: "уйгурский",
      Galician: "галисийский",
      Maltese: "мальтийский",
    }[input] ?? ""
  );
};

const displayTable = async () => {
  const columns: Column[] = [
    { field: "name", weight: "200px", title: "Наименование" },
    { field: "language", title: "Язык", valueExtractor: textExtractor },
    { field: "bio" },
    { field: "version" },
  ];

  const tab = new SimpleEasyTable();
  tab.init("table", columns);
  const fetchData = async () => {
    const res = await fetch("./mocks/rows.json"); // ./путь_к_mocks/rows.json
    const rows = await res.json();
    return rows;
  };

  // Можно подписаться на некоторые встоенные события, например
  // выделение строк
  window.addEventListener("checkRows", (e) => {
    const event = e as CustomEvent<CheckedRows>;
    console.log("checkRows", event.detail);
  });

  // выбор строки
  window.addEventListener("selectRow", (e) => {
    const event = e as CustomEvent<SelectRow>;
    console.log("selectRow", event.detail);
  });

  tab.loadRows(await fetchData());
};

displayTable().then();

Заметьте, в tab.init('вашкласс', ...) 'вашкласс' - это привязка к классу 'table', указанный в . Допускается указать сам HTML-элемент, например ref.current для React.

Стилизация

Встроенные стили минималистичны, но их можно модифицировать пользовательскими, за счет добавления дополнителоного .css. Модификации следует совершать с осторожнотью, не изменяя позиционирование классов header, row, cell, так как это может привести к деформации таблицы. Для модификации предусмотрены встроенные классы:

• header_additional - заголовок целиком
• header_cell_additional - ячейка заголовка
• row_additional - строка таблицы целиком
• row_cell_additional - ячейка строки
• substrate*additional - подложка виртуализатора Ни чего не мешает использовать собственные классы таблицы - header, row, cell, substrate. Кроме того для стилизации отдельных ячеек заголовка или строк вы можете применять обычные селекторы JS в сочатании '.класс[data_атрибут=""]'. Встроенные атрибуты: data-row-id, data-field (см. DOM).

Пример пользовательских стилей:

style.scss

.header_additional {
  background-color: rgba(233, 231, 231, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid lightgray;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.row:hover {
  background-color: rgba(208, 255, 208, 0.7) !important;
}

Mock-данные для примера

./путь_к_mocks/rows.json

[
  {
    "name": "Adeel Solangi",
    "language": "Sindhi",
    "id": "0",
    "bio": "Donec lobortis eleifend condimentum. Cras dictum dolor lacinia lectus vehicula rutrum. Maecenas quis nisi nunc. Nam tristique feugiat est vitae mollis. Maecenas quis nisi nunc.",
    "version": 6.1
  },
  {
    "name": "Afzal Ghaffar",
    "language": "Sindhi",
    "id": "1",
    "bio": "Aliquam sollicitudin ante ligula, eget malesuada nibh efficitur et. Pellentesque massa sem, scelerisque sit amet odio id, cursus tempor urna. Etiam congue dignissim volutpat. Vestibulum pharetra libero et velit gravida euismod.",
    "version": 1.88
  },
  {
    "name": "Aamir Solangi",
    "language": "Sindhi",
    "id": "2",
    "bio": "Vestibulum pharetra libero et velit gravida euismod. Quisque mauris ligula, efficitur porttitor sodales ac, lacinia non ex. Fusce eu ultrices elit, vel posuere neque.",
    "version": 7.27
  },
  {
    "name": "Abla Dilmurat",
    "language": "Uyghur",
    "id": "3",
    "bio": "Donec lobortis eleifend condimentum. Morbi ac tellus erat.",
    "version": 2.53
  },
  {
    "name": "Adil Eli",
    "language": "Uyghur",
    "id": "4",
    "bio": "Vivamus id faucibus velit, id posuere leo. Morbi vitae nisi lacinia, laoreet lorem nec, egestas orci. Suspendisse potenti.",
    "version": 6.49
  },
]

Статус проекта

В процессе разработки.