Tables - Documentation |


Smart.Table is created to replace and extend the HTML Table tag with custom styles, hover effects, sorting and data related capabilities.


To initialize a Table element the user has to include the following files to the head of the page:

  • smart.default.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.elements.js – the JS file containing all elements

The following code adds a Table to the page.

<!DOCTYPE html>
	<html lang="en">
	 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
	 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.elements.js"></script> </head> <body> <smart-table id="table"> <table> <thead> <tr> <th scope="col">Country</th> <th scope="col">Area</th> <th scope="col">Population_Rural</th> <th scope="col">Population_Total</th> <th scope="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> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.


See the Pen Smart Table Overview Demo by Boyko Markov (@boyko-markov) on CodePen.

Bordered Table

Add ".table-bordered" for borders on all sides of the table and cells.


See the Pen Table Bordered Demo by Boyko Markov (@boyko-markov) on CodePen.


Add ".table-dark" to make the table with Dark Background and White Color.


See the Pen Table Dark Bordered Demo by Boyko Markov (@boyko-markov) on CodePen.

Table Sorting

Add sort-mode="one" or sort-mode="many" to make the table Sortable by one or many columns. To sort the table through the API, use "sortBy" method and pass two arguments - Column's Name and 'asc', 'desc' or null to sort ascending, descending or remove the column's sort.


See the Pen Table Sort Demo by Boyko Markov (@boyko-markov) on CodePen.

Striped Rows

Use .table-striped to add zebra-striping.


Responsive tables make them easily scrollable. To make the Smart.Table responsive across all viewports, use the ".table-responsive" CSS class. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create the responsive element up to a particular breakpoint. From that breakpoint and up, the web component will behave normally and not scroll horizontally.