http://rackerlabs.github.io/rxDataTable/
The rx-data-table directive is designed to pretty much be a catch-all
solution for displaying data in a table format in a basic or extremely
complex style. It has some basic CSS styling included, but provides hooks
for you to attach conditional styles to each row or column.
- Single or Multi-Column Sorting
- Column Display Presets
- Individual Data-Driven Cell Styling
- CSS FlexBox display for fluid space display
- Inline Field Editing
- Text Editing
- Multi-Option Selects
- Typeahead auto-complete
- You must already have an angular project set up.
- Install via bower:
bower install angular-rx-data-table
- Include angular-rx-data-table in your code
<link href="bower_components/angular-rx-data-table/dist/styles/rx-data-table.min.css" rel="stylesheet">
<script src="bower_components/angular-rx-data-table/dist/scripts/rx-data-table.min.js"></script>
- Add the module to your app's dependencies:
var app = angular.module("app", ["rxDataTable"]);
- For further instructions on how to use the directive, view the full documentation here.
To speed up development of rxDataTable changes, use bower link to see your changes on the encore UI.
To get this working, you'll need to run bower link in rxDataTable and set up grunt to refresh on changes:
bower link
grunt watch
After this, go to the encore UI project folder, and enter:
bower link tq-rx-data-table
After this, you should see your data table changes reflected on page refreshes.
When you're done making your changes and wish to revert to the bower deployed version of rxDataTable, you can return to it by entering:
bower uninstall tq-rx-data-table
Obviously this requires you to have an angularjs project to use this.
This project uses the angular-xeditable for it's inline editing capabilities.
...