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-pluginCDN
<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, 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
npm run build
# Run tests
npm run test
# Lint
npm run lint
# Format code
npm run formatDevelopment 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.