smart-table-community

v24.0.2

Published

5 months ago

Fast and feature-rich data table for React, Angular, and Web Components with support for sorting, filtering, paging, and more.

Smart.Table - Free & Open-Source Web Component for Powerful Data Tables

Smart.Table is a free, open-source Web Component for building dynamic, interactive data tables and datagrids. Part of the Smart UI Community Version, it provides a modern, lightweight alternative to standard HTML tables with advanced features like sorting, filtering, grouping, pagination, and cell editing. Designed for JavaScript, React, Angular, Vue, and vanilla JS, it’s fully customizable and developer-friendly.

Framework-agnostic: Seamlessly integrates with React, Angular, Vue, or plain JavaScript.
Feature-packed: Sorting, filtering, grouping, tree tables, pagination, and more.
Customizable: Bring your own styles, themes (Bootstrap, Material), and UI components.
Responsive: Optimized for desktop, tablet, and mobile with sticky headers/columns.
Free & Open-Source: Licensed under Apache 2.0, forever free for personal and commercial use.

Keywords: Web Component, Data Table, Datagrid, JavaScript Table, React Table, Angular Table, Vue Table, Sorting, Filtering, Pagination, Free Table Component, Open-Source Table, Responsive Table, Tree Table, Cell Editing

Live Demo ↗ | Documentation ↗ | Installation ↗

Why Choose Smart.Table?

Smart.Table is built for developers who need powerful, flexible, and free table solutions. Whether you're creating dashboards, admin panels, or data-heavy applications, Smart.Table offers:

Performance: Lightweight and optimized for large datasets with lazy loading.
Accessibility: Keyboard navigation and ARIA support.
Extensibility: Supports custom rendering, data export (Excel, PDF, CSV, HTML, TSV), and more.
Community-Driven: Open-source with active contributions welcomed.

Features

Smart.Table is packed with features to simplify data presentation:

Sorting: Single or multi-column sorting with custom logic.
Filtering: Filter row or input-based filtering for quick data search.
Grouping: Collapsible groups for organized data views.
Tree Table: Hierarchical data with expandable rows.
Cell & Row Editing: Inline editing with validation.
Pagination: Efficient handling of large datasets.
Responsive Design: Adaptive layouts for all devices.
Sticky Headers/Columns: Keep headers and columns visible while scrolling.
Data Export: Export to Excel, PDF, HTML, CSV, TSV.
Keyboard Navigation: Accessible and intuitive controls.
Custom Themes: Supports Bootstrap, Material, and custom CSS.
Column Reordering: Drag-and-drop column management.
Multi-Row Headers/Footers: Flexible table structures.

Getting Started

Installation

Install via npm for modern JavaScript projects:

npm install smart-table-community

Or include directly in your HTML:

<script src="https://cdn.jsdelivr.net/npm/smart-table-community/source/modules/smart.table.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smart-table-community/source/styles/smart.default.css" />

Basic Example

Create a simple table with Smart.Table:

<smart-table>
  <table>
    <thead>
      <tr>
        <th scope="col">Country</th>
        <th scope="col">Area (km²)</th>
        <th scope="col">Population</th>
        <th scope="col">GDP (USD)</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Brazil</td><td>8515767</td><td>205809000</td><td>2353025</td></tr>
      <tr><td>China</td><td>9388211</td><td>1375530000</td><td>10380380</td></tr>
      <tr><td>France</td><td>675417</td><td>64529000</td><td>2846889</td></tr>
    </tbody>
  </table>
</smart-table>

For advanced usage, check the Documentation.

Demos

Explore Smart.Table’s capabilities through interactive demos:

Contributing

Smart.Table is free and open-source, and we welcome contributions from the community! To get started:

Fork the Repository: Clone Smart-Table locally.
Install Dependencies:
```
npm install
```
Run Demos: Host locally or on a web server and navigate to /examples/vanilla/basic/.
Code Standards: Ensure compliance with ESLint.
Submit a Pull Request: Follow the pull request guide with a clear title and description.

Community & Support

Documentation: API, CSS, Getting Started.
Issues: Report bugs or suggest features on GitHub Issues.
Community: Join discussions on GitHub Discussions.
Contact: Reach out at [email protected].

Partners

We’re seeking partners to collaborate on advancing Smart.Table! Email us at [email protected] to explore opportunities.

License

Smart.Table is licensed under the Apache License 2.0. Free for personal and commercial use, with no restrictions.

Explore the Smart UI Ecosystem

Discover more components in the Smart UI Community for building modern web applications.

Tags: #WebComponents #DataTable #Datagrid #JavaScript #React #Angular #Vue #FreeSoftware #OpenSource #ResponsiveDesign #TableComponent