Package Exports
- @matdata/yasgui-table-plugin
- @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.cjs.js
- @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.esm.js
- @matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.css
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
- 🎨 Dynamic Theme Support - Automatically adapts to YASGUI light/dark theme changes
- 📋 Selection & Copy - Select cells/rows and copy to clipboard
- 💾 Copy - Copy to clipboard as Markdown, CSV, or TSV (tab-delimited) formats
- 📥 YASR Integration - Integrated with YASR's download interface for CSV export
- 💬 Tooltips - Hover over any cell to view full content
- 🔔 Notifications - Visual feedback for copy operations
- ♿ Accessible - WCAG AA compliant with keyboard navigation
- 🎯 SPARQL-Aware - Proper rendering of URIs, literals, datatypes, and blank nodes with prefix support from YASR
Installation
npm
npm install @matdata/yasgui-table-pluginCDN
<script src="https://unpkg.com/@matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@matdata/yasgui-table-plugin/dist/yasgui-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/yasgui-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 copy events
tablePlugin.on('copy', (data) => {
console.log(`Copied as ${data.format}`);
});
// Available events:
// - ready, search, columnSort, columnResize, cellDoubleClick
// - selectionChange, selectionCleared, clipboardCopy
// - copy, layoutChange, error, destroyPublic 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 with esbuild
npm run build
# Run tests
npm run test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverageDevelopment 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.
Build System
The project uses esbuild for production builds with:
- CJS, ESM, and minified UMD module formats
- PostCSS for CSS processing
- TypeScript type declarations
Build outputs are generated in dist/ with .cjs.js, .esm.js, and .min.js formats.
License
Apache-2.0
Contributing
Contributions are welcome! Please read the specification documents in ./specs/001-advanced-table/ before submitting changes.