Simple Table Data Grid

The Angular examples showcase the @simple-table/angular adapter using Angular 17+ standalone components and Signals. Key features demonstrated include:

• Performance: Virtualization for handling 1M+ rows.
• Column Management: Pinning, resizing, reordering, and visibility.
• Layout: Nested headers and row grouping.
• Interaction: Inline cell editing and custom renderers using Angular components.
• Data Handling: Pagination and infinite scroll.
• Control: Programmatic control and various themes.

Simple Table is designed to leverage Solid's reactivity and component model:

• Fine-grained Reactivity: The API is signals-friendly; updates flow through Solid's reactivity system.
• Component-based Rendering: Use Solid components to create custom cell renderers, header renderers, footer renderers, and more.
• Imperative Control: Access the TableAPI via a ref callback to programmatically trigger actions like sorting, filtering, pagination, and exporting.
• Environment Support: Works with Solid Start, Vite, and TypeScript in strict mode. All necessary types and APIs are exported from the @simple-table/solid package.

Simple Table for React provides a highly customizable data grid experience using React-native patterns:

• Component-based Rendering: Use standard React components to create custom cell renderers, header renderers, footer renderers, and more.
• Imperative Control: Access the full TableAPI via a React ref to programmatically trigger actions like sorting, filtering, pagination, and exporting.
• Type Safety: All types and APIs are exported directly from the @simple-table/react package.

Simple Table is designed for modern Vue development using the Composition API and <script setup>.

Key Integration Patterns:

• Reactivity: Works seamlessly with ref, reactive, computed, and watch.
• Custom Rendering: Use Vue components to create custom cell renderers, header renderers, and footer renderers.
• Imperative Control: Access the TableAPI via a template ref to programmatically trigger actions like sorting, filtering, pagination, and exporting.
• TypeScript Support: All types and APIs are exported from the package, making it compatible with Vite, Nuxt 3+, and <script setup lang="ts">.

Simple Table is designed to integrate deeply with Svelte's component model:

• Custom Rendering: Use Svelte components to create custom renderers for cells, headers, and footers.
• Imperative Control: Access the TableAPI using Svelte's bind:this directive. This allows you to programmatically trigger actions like sorting, filtering, pagination, and exporting data.
• Type Safety: All types and APIs are exported from the @simple-table/svelte package for full TypeScript support.

<script>
  import { SimpleTable } from '@simple-table/svelte';
  let tableApi;
</script>

<SimpleTable bind:this={tableApi} />

<button on:click={() => tableApi.sort('columnName')}>Sort Column</button>

Alternatively, you can use the pnpm --filter command from the monorepo root to run the development script specifically for the simple-table-marketing package.

pnpm --filter simple-table-marketing run dev

To use the framework-agnostic data grid engine in a vanilla TypeScript or JavaScript project without any framework runtime (like React or Vue), install the core package via npm.

npm install simple-table-core