Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Table UI Component. Available for Web Components, Angular and React

License

NotificationsYou must be signed in to change notification settings

HTMLElements/smart-table

Repository files navigation

Table with Fliter

Smart.Table supports the following features:

  • Sorting by one and multiple columns
  • Paging
  • Filtering with Filter Row and Filtering Input
  • Grouping
  • Tree Table
  • Expandable Rows
  • Cell and Row Editing
  • Keyboard navigation
  • Selection
  • Cell Validation
  • Loading on Demand
  • Responsive columns
  • Multi Row Header and Footer
  • Sticky Columns
  • Sticky Header
  • Columns Reorder
  • Data Export to Excel, PDF, HTML, CSV, TSV, HTML

Table Component

Smart.Table is FREE for everyone.

Demos:https://www.htmlelements.com/demos/table/overview/

 PricenpmLicense: APACHEPublished on webcomponents.org

<smart-table>

Live Demo ↗|Documentation ↗|Documentation for Web Components↗|Documentation for Angular↗|Documentation for React↗|

Installation ↗

<smart-table> is a Custom HTML Element providing an alternative of the standard Table, part of theSmart UI Community Version.

<smart-table><table><thead><tr><thscope="col">Country</th><thscope="col">Area</th><thscope="col">Population_Rural</th><thscope="col">Population_Total</th><thscope="col">GDP_Total</th></tr></thead><tbody><tr><td>Brazil</td><td>8515767</td><td>0.15</td><td>205809000</td><td>2353025</td></tr><tr><td>China</td><td>9388211</td><td>0.46</td><td>1375530000</td><td>10380380</td></tr><tr><td>France</td><td>675417</td><td>0.21</td><td>64529000</td><td>2846889</td></tr><tr><td>Germany</td><td>357021</td><td>0.25</td><td>81459000</td><td>3859547</td></tr><tr><td>India</td><td>3287590</td><td>0.68</td><td>1286260000</td><td>2047811</td></tr><tr><td>Italy</td><td>301230</td><td>0.31</td><td>60676361</td><td>2147952</td></tr><tr><td>Japan</td><td>377835</td><td>0.07</td><td>126920000</td><td>4616335</td></tr><tr><td>Russia</td><td>17098242</td><td>0.26</td><td>146544710</td><td>1857461</td></tr><tr><td>United States</td><td>9147420</td><td>0.19</td><td>323097000</td><td>17418925</td></tr><tr><td>United Kingdom</td><td>244820</td><td>0.18</td><td>65097000</td><td>2945146</td></tr></tbody></table></smart-table>

Tree Table

Table with Tree

Table Grouping

Table with Grouping

Table with Filter Row

Table with Filter Row

Table with Cell Edit

Table with Edit

Basic table

Screenshot of smart-table, using the Material theme

Table with Bootstrap UI

Table Bootstrap

Table with Sort

Screenshot of smart-table, using which is sortable

Table with Responsive CSS

Screenshot of smart-table, using the Responsive Tablet mode

Screenshot of smart-table, using the Responsive mode

Getting Started

Smart HTML Elements components documentation includes getting started, customization and api documentation topics.

Getting Started Documentation|CSS Documentation|API Documentation

The file structure for Smart HTML Elements

  • source/

    Javascript files.

  • source/styles/

    Component CSS Files.

  • demos/

    Demo files

Running demos in browser

  1. Fork theSmart-HTML-Elements-Core repository and clone it locally.

  2. Make sure you havenpm installed.

  3. When in theSmart-HTML-Elements-Core directory, runnpm install and thenbower install to install dependencies.

  4. Run a localhost or upload the demo on a web server. Then run:

  • /demos/smart-table/overview/

Following the coding style

We are usingESLint for linting JavaScript code.

Creating a pull request

  • Make sure your code is compliant with ESLint
  • Submit a pull request with detailed title and description
  • Wait for response from one of our team members

License

Apache License 2.0


[8]ページ先頭

©2009-2025 Movatter.jp