Angular Responsive Tables

Make your HTML tables look great on every device
Alternatives To Angular Responsive Tables
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Table1,807
915 years ago25February 02, 201764mitVue
data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
Json To Html Table354
3 years ago2August 07, 20127JavaScript
Simple Json to standard HTML table converter in fastest way
Vanilla Datatables256
24 years ago69September 25, 201833mitJavaScript
A lightweight, dependency-free javascript HTML table plugin
Tablefilter221913 years ago263July 22, 202029mitHTML
A Javascript library making HTML tables filterable and a bit more :)
Json2html165191262 years ago13July 03, 201913mitPython
🐍 Python module for converting complex JSON to HTML Table representation
Vuejs Smart Table15241a year ago27February 09, 202225mitVue
Simple yet powerful Data Table for Vue with vanilla HTML structure
7 years agoJune 11, 20145mitJavaScript
UNSUPPORTED: Bootstrap themed per-column filter for an HTML table
5 days ago3April 07, 202224R
Conversion of R Regression Output to LaTeX or HTML Tables
Syscalls Table90
5 days ago4mitJinja
Simple tool to generate HTML table of Linux system calls on different architectures
Livewire Smart Table88
a month ago6February 25, 2022mitPHP
An advanced datatable component for Laravel Livewire.
Alternatives To Angular Responsive Tables
Select To Compare

Alternative Project Comparisons


Make your HTML tables look great on every device. Compatible with AngularJS 1.3.4+.

Live Demo


Currently, browsers for mobile devices like smartphones doesn't do anything to have a proper presentation of tables, and then scrollbars will show up and ruin your design.

In the search of a solution to this problem I have found many different approaches. Some of them still rely on horizontal scrollbars. While I believe this layout could be useful for some use cases, I felt that a default solution should avoid horizontal scrollbars entirely. Then I came up with this highly reusable directive.

All this work is based on the following assumptions:

  • If it is flexible, then it would solve most problems, even ones not aimed by the library author's;
  • Focusing on the task of adding responsiveness, in order to accomplish a greater objective (easy to use tabular data);
  • Do work with a standard HTML table, not requiring any extraneous markup;
  • Do not change default tabular layout unless a smaller display is detected;
  • Provide convenience without sacrificing flexibility;
  • By keeping code base simple, it is easier to reason about and evolve;
  • By fully covering with tests, it can evolve without introducing bugs.


  • Angular native implementation compatible with 1.3.4+;
  • Keep things DRY;
  • Supports static and dynamic (ng-repeat) rows;
  • Supports conditionally shown (ng-if) columns;
  • Supports dynamic headers (ng-repeat);
  • Supports nested tables (responsive or not in their own right);
  • Easy to apply any style on top of it;
  • Works with any base CSS framework;
  • Should integrate seamlessly with any table component you might choose to use.

Future Work

  • Choose what columns to show/hide according to a given screen resolution;
  • Choose when it would be best to hide columns or collapse all columns;
  • Define a header and/or custom template for collapsed columns/row;
  • Allow collapse/expand column details.


<table wt-responsive-table>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>



  • table: wt-responsive-table
    • td: responsive-omit-title: title should be ommited
    • td: responsive-omit-if-empty: no row for empty cells
    • td: data-title: use to override the header for a given row/cell



npm install --save angular-responsive-tables


bower install angular-responsive-tables --save



<link rel="stylesheet" href="release/angular-responsive-tables.min.css">
<script type="text/javascript" src="release/angular-responsive-tables.min.js"></script>


var app = angular.module('app', ['wt.responsive']);

Special cases

Header doesn't appear for a row / need to override header

It's possible to override a header with a data-title attribute:

    <td data-title="column 1">tom</td>
    <td data-title="column 2">jerry</td>

Changes to header text doesn't reflect in responsive mode

This is by design. To avoid expensive digest cycles only the content from the first digest cycle is used. There are no watchers being setup.

Dynamic column names

When loading column names with an asynchronous task, that is, column names are not available when first compiling the table element, rows in responsive mode won't have headers even after the task completes.

To avoid this problem, use an ng-if to conditionally present the element on screen.

<table wt-responsive-table ng-if="columnNames && columnNames.length">

IE9 responsive hack

Because IE9 doesn't handle correctly a display CSS rule for <td>, if you need to support it, you can use the following style, only for IE9:

<!--[if IE 9]>
/* rules for IE9 only */
.responsive {
    overflow: hidden;
.responsive td:nth-child(odd), .responsive td:nth-child(even) {
    float: left;
    width: 100%;


CSS based on original work by Chris Coyier ( In this article, he covers approaches to responsive tables. I modified it to work around CSS specificity and to keep things DRY.



Popular Table Projects
Popular Html Table Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Responsive Design
Html Table