なおしむ naosim

Tabulator Sample

ここではTabulatorの表示機能について解説します。データの編集については触れません。

概要

Tabulatorは、HTML上で多機能かつ高品質なテーブルを直感的に作成できる強力なJavaScriptライブラリです。従来の単純なHTMLの表とは異なり、Excelのような高度な操作をウェブブラウザ上で実現します。主な特徴は、動的なデータのソート、多機能なフィルタリング、セル内での直接編集、ドラッグ＆ドロップによる列の並べ替え、そしてウィンドウ枠の固定（frozen columns）などです。また、仮想DOM（Virtual DOM）技術を採用しているため、数万行規模の膨大なデータであっても、メモリ消費を抑えながら非常に高速で滑らかな描画が可能です。 JSON、CSV、TSVなど多様なデータ形式を簡単に取り込めるほか、CSSによるデザインのカスタマイズ性も高く、業務用のデータ管理システムから分析ツールまで、データ集約型のアプリケーション開発において世界中で広く採用されています。

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- CSSの読み込み -->
	<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
	<!-- JSの読み込み -->
	<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

	Id Name ProductCode Description IsActive Family CreatedDate CreatedById LastModifiedDate LastModifiedById IsDeleted CurrencyIsoCode
	01t000000000000001 Product 1 SKU-00001 Sample product 1 description. TRUE Hardware 2024-01-01T10:00:00.000Z 005000000000000001 2024-01-02T10:00:00.000Z 005000000000000002 FALSE USD
	01t000000000000002 Product 2 SKU-00002 Sample product 2 description. TRUE Software 2024-01-02T10:00:00.000Z 005000000000000002 2024-01-03T10:00:00.000Z 005000000000000003 FALSE USD
	01t000000000000003 Product 3 SKU-00003 Sample product 3 description. TRUE Service 2024-01-03T10:00:00.000Z 005000000000000003 2024-01-04T10:00:00.000Z 005000000000000001 FALSE USD
	01t000000000000004 Product 4 SKU-00004 Sample product 4 description. TRUE Subscription 2024-01-04T10:00:00.000Z 005000000000000001 2024-01-05T10:00:00.000Z 005000000000000002 FALSE USD
	01t000000000000005 Product 5 SKU-00005 Sample product 5 description. TRUE Consumable 2024-01-05T10:00:00.000Z 005000000000000002 2024-01-06T10:00:00.000Z 00500000000

	function myFunction() {
	const fileId = '読み込むtsvファイルのID';
	const spreadSheetId = 'スプシ';
	const sheetName = 'シート1';
	const filterRowNumber = 2; // 1オリジン
	const tsvData = [fileId].map(readFile).map(parseTsv)[0];
	writeToSheet(tsvData, spreadSheetId, sheetName, filterRowNumber);
	}

	function writeToSheet(data, spreadSheetId, sheetName, filterRowNumber = 1) {

	import { DatabaseSync } from 'node:sqlite';
	const isMemory = true;
	const path = isMemory ? ':memory:' : 'path/to/file';
	const database = new DatabaseSync(path);


	export class ChangeEventTable {
	/** @type {DatabaseSync} */
	db;

	// yocto-queue からの引用
	// https://github.com/sindresorhus/yocto-queue
	/*
	How it works:
	`this.#head` is an instance of `Node` which keeps track of its current value and nests another instance of `Node` that keeps the value that comes after it. When a value is provided to `.enqueue()`, the code needs to iterate through `this.#head`, going deeper and deeper to find the last value. However, iterating through every single item is slow. This problem is solved by saving a reference to the last value as `this.#tail` so that it can reference it to add a new value.
	*/
	class Node {
	value;
	next;



	const event = {
	action: 'idle',
	onGround: false
	}
	const stateMaChines = [
	{
	state: 'idle',
	events: [

	/**
	* @typedef {"eval" \| "forFilter" \| "forMap" \| "forReduce" \| "if" \| "milestone"} ProcessType
	*/

	/**
	* @typedef ProcessObject
	* @property {any} [input]
	* @property {ProcessType} type
	* @property {string} [process]
	* @property {string} [referenceId] - The id to store the output of this process in the payload

	/**
	* プレイヤー。矢印で操作できる
	*/
	class Player {
	gameObject;
	cursors;
	create(scene) {
	const player = (this.gameObject = scene.physics.add.existing(
	scene.add.rectangle(100, 300, 16, 28, 0xffff00)
	));

	class ScreenGamePad {
	UP = false;
	DOWN = false;
	RIGHT = false;
	LEFT = false;
	A = false;
	B = false;
	press = {
	UP: false,
	DOWN: false,

なおしむ naosim

Tabulator Sample

概要

Getting Started