JSPM

@matdata/yasgui-table-plugin

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 182
  • Score
    100M100P100Q81747F
  • License MIT

High-performance YASGUI plugin for rendering SPARQL SELECT results with interactive table features

Package Exports

  • @matdata/yasgui-table-plugin
  • @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.esm.js
  • @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.css
  • @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@matdata/yasgui-table-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

YASGUI Table Plugin

High-performance YASGUI plugin for rendering SPARQL SELECT results in an interactive table with advanced features.

Features

  • 🚀 Virtual Scrolling - Efficiently handles 10,000+ rows
  • 🔍 Search & Filter - Real-time search with highlighting
  • 📊 Interactive Columns - Sort and resize columns
  • 🎨 Theme Support - Integrates with YASGUI themes
  • 📋 Selection & Copy - Select cells/rows and copy to clipboard
  • 💾 Export - Export to Markdown, CSV, or TSV formats
  • Accessible - WCAG AA compliant with keyboard navigation
  • 🎯 SPARQL-Aware - Proper rendering of URIs, literals, datatypes, and blank nodes

Installation

npm

npm install @matdata/yasgui-table-plugin

CDN

<script src="https://unpkg.com/@matdata/yasgui-table-plugin/dist/table-plugin.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@matdata/yasgui-table-plugin/dist/table-plugin.css">

Quick Start

import Yasgui from '@yasgui/yasgui';
import TablePlugin from '@matdata/yasgui-table-plugin';
import '@yasgui/yasgui/build/yasgui.min.css';
import '@matdata/yasgui-table-plugin/dist/table-plugin.css';

// Register the plugin
Yasgui.Yasr.plugins.table = TablePlugin;

// Create YASGUI instance
const yasgui = new Yasgui(document.getElementById('yasgui'), {
  requestConfig: { endpoint: 'https://dbpedia.org/sparql' },
  yasqe: { value: 'SELECT * WHERE { ?s ?p ?o } LIMIT 100' }
});

Configuration

const yasgui = new Yasgui(document.getElementById('yasgui'), {
  yasr: {
    pluginsOptions: {
      table: {
        displayConfig: {
          uriDisplayMode: 'abbreviated',  // 'full' or 'abbreviated'
          showDatatypes: true,            // Show datatype annotations
          ellipsisMode: true              // Truncate long cell content
        },
        persistenceEnabled: true          // Save user preferences
      }
    }
  }
});

Event API

The plugin emits events that can be used to integrate with your application:

const tablePlugin = yasgui.getTab().yasr.plugins.table;

// Listen for search events
tablePlugin.on('search', (data) => {
  console.log(`Filtered to ${data.filteredCount} of ${data.totalCount} rows`);
});

// Listen for column sort
tablePlugin.on('columnSort', (data) => {
  console.log(`Sorted by ${data.column} ${data.dir}`);
});

// Listen for selection changes
tablePlugin.on('selectionChange', (data) => {
  console.log('Selection:', data.range);
});

// Listen for export events
tablePlugin.on('export', (data) => {
  console.log(`Exported as ${data.format}`);
});

// Available events:
// - ready, search, columnSort, columnResize, cellDoubleClick
// - selectionChange, selectionCleared, clipboardCopy
// - export, layoutChange, error, destroy

Public Methods

// Get current selection
const selection = tablePlugin.getSelection();

// Clear selection
tablePlugin.clearSelection();

// Get download info
const downloadInfo = tablePlugin.getDownloadInfo();

// Update configuration
tablePlugin.updateConfig({ displayConfig: { ellipsisMode: true } });

// Event listeners
tablePlugin.on('eventName', handler);
tablePlugin.off('eventName', handler);
tablePlugin.once('eventName', handler);

Browser Compatibility

  • Chrome (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Edge (latest 2 versions)

Documentation

For detailed documentation, see the specification and quickstart guide.

Development

# Install dependencies
npm install

# Start development server with Vite (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Lint
npm run lint

# Format code
npm run format

Development Server

The npm run dev command starts a Vite development server at http://localhost:3000 with:

  • Hot module replacement (HMR) for instant updates
  • Source maps for debugging TypeScript
  • Serves the demo page from demo/index.html
  • Plugin source loaded directly from src/ (no build needed)

The demo automatically loads the plugin from source during development for live reload.

License

MIT

Contributing

Contributions are welcome! Please read the specification documents in ./specs/001-advanced-table/ before submitting changes.