eisenbraun / columns

A jQuery plugin that converts JSON data into searchable, sortable, HTML tables
http://eisenbraun.github.io/columns
MIT License
104 stars 47 forks source link

How to lpad (Mustache.Wax.js) or right-justify in Columns 2.0 columns ? #25

Closed petejordan closed 5 years ago

petejordan commented 8 years ago

How to lpad (Mustache.Wax.js) or right-justify in Columns 2.0 columns ?

Thx muchly, Pete

vordan commented 8 years ago

In Bootstrap, you do this (in a column schema) template:'<span class="pull-right">{{total_value}}</span>

If not in Bootstrap, substitute class="pull-right" with style="text-align:right;"

petejordan commented 8 years ago

vordan,

 thank you for your response . . . but . . .  my solution is done utilizing Micheal Eisenbraun's 

Columns 2.0 grid which employs MustacheJS templating. How would your contributions work in this context ? :

                view = $('#FishGrid').columns({
                    data: json,
                    //showRows: [json.length],          // defaults to 5.
                    showRowsMenu: false,                // ???
                    size: json.length,                  // CRITICAL: controls page size. 
                    table: true,                        // CRITICAL: must be 'true' or nothing.            
                    templateFile: "/FishStock/Scripts/MichaelEisenbraun/default.html",  // DEV.
                    //templateFile: "Scripts/MichaelEisenbraun/default.html",           // localhost.
                    rows: true,
                    schema: [
                        { "header": "County", "key": "CountyName" },
                        { "header": "Water Body", "key": "WaterName" },
                        { "header": "Species", "key": "SpeciesName" },
                        { "header": "Strain", "key": "StrainName" },
                        { "header": "Date", "key": "Date", "template": "{{#Date}}{{Date | mmddyy }}{{/Date}}" },
                        { "header": "Number", "key": "Number", "template": "{{#Number}}{{Number | thousandsSeparator }}{{/Number}}" },
                        { "header": "Operation", "key": "Operation" },
                        { "header": "Avg. Length", "key": "Length" },
                        { "header": "Fin Clips, Marks, Tags", "key": "Marking" }
                    ]
                });

Thx, P.

vordan commented 8 years ago

Same thing: '<div style="text-align:center;">template: '{{#Date}}{{Date | mmddyy }}{{/Date}}</div>' or, if you prefer spans: '<span style="display:block;text-align:center;">template: '{{#Date}}{{Date | mmddyy }}{{/Date}}</span>'

petejordan commented 8 years ago

Thank you Vanco.