This example builds on the Column Sort example. It makes use of the Y.Color module. It also shows how to filter the Model List of the DataTable to get a subset of the data.
Click on the column headers to sort the color swatches in different ways. Filter the data with the radio buttons on the right.
To add column sorting functionality to any DataTable, simply include the `datatable-sort` module in your `use()` line and add the `sortable: true` configuration to the configuration objects of the columns you want to be sortable, as shown in the Column Sorting example.
Note, if you want all columns to be sortable, simply set `sortable: true` on the DataTable instance.
``` YUI().use("datatable-sort", function(Y) { // code goes here }); ```This example also uses the `color-harmony` module
``` YUI().use("datatable-sort", 'color-harmony', function(Y) { // code goes here }); ```Sorting and filtering can help users find the right color. Hex values don't help much in sorting the colors in a visually logical way. Later in the code, the following function will use the Y.Color module to generate a special color number for each hex value. This color number will be more useful in sorting and filtering.
``` {{>datatable-colorsort-js-getcolornum}} ```We'll now add the details to the DataTable instance.
The provided data from `var = myData` only has two properties per row to use as columns, but we are adding more columns in the `columns` config. A Swatch column allows users to see the colors. We used a formatter to set the content to be a `
We're also adding 2 columns that will allow sorting by Hue and Brightness priorities respectively. The DataTables ModelList (where myData is stored) doesn't contain any data for these columns yet. That will be added by the `recordType`. See next snippet.
``` myTable = new Y.DataTable({ columns: [ { key: "swatch", label: 'Swatch', // Use formatter to add a div swatch in each cell // Color the background-color from hex value in each row formatter: function(o) { return ''; }, sortable: false, allowHTML: true }, { key: "name", label: 'Color Name', sortable: true }, { key: "hex", label: 'Hex', sortable: true }, { key: "hbs", label: 'Hue', // hue.bright.sat sortable: true }, { key: "bhs", label: 'Bright', // bright.hue.sat sortable: true } ], recordType: { // see the next code snippet below }, data: myData, sortBy: { hbs: 'desc' } }).render("#cTable"); ```As described in the Sortable Generated Columns example, we're using a `getter` to return a color number string from the `getColorNum` function shown above. This puts these values in the DataTable's ModelList so they'll be filterable and the columns can be sortable.
``` myTable = new Y.DataTable({ columns: [ // see the previous code snippet above ], recordType: { swatch: {}, name: {}, hex: {}, hbs: { getter: function() { // create a new attribute in the model // and generate a sortable color number // from the hex value for each Model return getColorNum(this.get('hex'), 'hbs'); } }, bhs: { getter: function() { // do the same for bright.hue.sat return getColorNum(this.get('hex'), 'bhs'); } } }, data: myData, sortBy: { hbs: 'desc' } // initial sorting }).render("#cTable"); ```The `filterModel` function filters the original data of the DataTable to get a subset. See the example Filtering the Model List for a simpler example of filtering. ``` {{>datatable-colorsort-js-filtermodel}} ```
The `filterModel` function is used in these ways.
``` // initial filtering of the dataTable's modelList to muted colors filterModel('filter-mute'); // listen for filter change Y.all('.filters').on('click', function(e) { filterModel(e.target.get('id')); }); ```