Merge pull request #11 from Mindsers/develop

Columns improvements

Author: mindsers

README.md

@@ -9,6 +9,8 @@ Nativetable is a simple native es6 module to create and work with dynamics HTML
 
 Nativetable allow you to sort, filter and paginate your data in an HTML table. No useless features, only one line of code is required to load your data.
 
+Check the [demo](https://mindsers.github.io/nativetable/) page.
+
 ## Installation
 
 You can build your own Nativetable with this project.

package.json

@@ -2,7 +2,7 @@
   "name": "nativetable",
   "version": "1.0.0",
   "description": "Create and use dynamics HTML tables with native JS",
-  "repository": "https://git.nathanaelcherrier.com/mindsers/nativetable.git",
+  "repository": "https://github.com/Mindsers/nativetable",
   "main": "dist/nativetable.min.js",
   "scripts": {
     "build:js": "rollup -c",

src/nativetable/nativetable.js

@@ -278,7 +278,7 @@ export default class Nativetable {
   /**
    * Colum's nouns getter
    *
-   * @return {string[]} - colum's nouns
+   * @return {Object[]} - column
    */
   get columns() {
     let headers = this.options.columns || []
@@ -299,14 +299,19 @@ export default class Nativetable {
       }
     })
 
-    this.options.columns = headers
+    this.options.columns = headers.map((el) => {
+      return {
+        key: el,
+        title: el
+      }
+    })
     return this.options.columns
   }
 
   /**
    * Colum's nouns setter
    *
-   * @param {string[]} value - colum's nouns
+   * @param {string[]|Object[]} value - column
    */
   set columns(value) {
     this.options.columns = []
@@ -315,11 +320,24 @@ export default class Nativetable {
       return
     }
 
-    for (let noun of value) {
-      if (typeof noun === 'string') {
-        this.options.columns.push(noun)
+    for (let columns of value) {
+      let { key, title } = columns
+
+      if (typeof columns === 'string') {
+        key = title = columns
+      }
+
+      if (typeof key === 'undefined' || typeof title === 'undefined') {
+        continue
       }
+
+      this.options.columns.push({
+        key,
+        title
+      })
     }
+
+    this.options.reloading.headers = true
   }
 
   /**
@@ -467,7 +485,7 @@ export default class Nativetable {
   /**
    * Builder for table header
    *
-   * @param {string[]} cols - Array of columns
+   * @param {Object[]} cols - Array of columns
    *
    * @return {HTMLElement} A thead HTML tag
    */
@@ -479,27 +497,26 @@ export default class Nativetable {
 
     theadTag.classList.add('nt-head')
 
-    for (let name of columns) {
+    for (let { key, title } of columns) {
       let tdTag = document.createElement('td')
-      tdTag.textContent = name
+      tdTag.textContent = title
+      tdTag.dataset.ntColumnName = key
 
       if (this.options.sorting.activated) {
         const glyphList = {
           asc: '<span class="nt-icon nt-icon-sort-asc"></span>',
           desc: '<span class="nt-icon nt-icon-sort-desc"></span>',
           none: '<span class="nt-icon nt-icon-sort-none"></span>'
         }
-        let order = this.options.sorting.column === name ? this.options.sorting.order : 'none'
+        let order = this.options.sorting.column === key ? this.options.sorting.order : 'none'
         let glyph = glyphList[order]
         let aTag = document.createElement('a')
 
         aTag.href = '#'
         aTag.addEventListener('click', this.onSortingClick.bind(this))
-        aTag.innerHTML = `${name} ${glyph}`
+        aTag.innerHTML = `${title} ${glyph}`
 
-        tdTag.dataset.ntColumnName = name
         tdTag.textContent = ''
-
         tdTag.appendChild(aTag)
       }
 
@@ -531,9 +548,9 @@ export default class Nativetable {
       trTag.classList.add('nt-row')
       trTag.dataset.ntObject = this.objectSignature(row)
 
-      for (let name of columns) {
+      for (let { key } of columns) {
         let tdTag = document.createElement('td')
-        tdTag.textContent = typeof row[name] === 'undefined' ? '' : row[name]
+        tdTag.textContent = typeof row[key] === 'undefined' ? '' : row[key]
         trTag.appendChild(tdTag)
       }
 

test/nativetable.js

@@ -412,18 +412,27 @@ describe('Nativetable', () => {
   })
 
   describe('#columns', () => {
+    let expected = [
+      { key: 'id', title: 'id' },
+      { key: 'name', title: 'name' },
+      { key: 'lastname', title: 'lastname' },
+      { key: 'age', title: 'age' },
+      { key: 'man', title: 'man' },
+      { key: 'brother', title: 'brother' }
+    ]
+
     it('should have datasource keys as columns name', () => {
-      nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
+      nt.columns.should.to.eql(expected)
     })
 
     it('should have datasource keys as columns name by default', () => {
       nt.options.columns = null
-      nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
+      nt.columns.should.to.eql(expected)
     })
 
     it('should have datasource keys as columns name when user would force empty array', () => {
       nt.columns = []
-      nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
+      nt.columns.should.to.eql(expected)
     })
 
     it('should replace _column by an empty array if user try to set columns as null', () => {
@@ -434,12 +443,17 @@ describe('Nativetable', () => {
 
     it('should have the given array elements as columns name', () => {
       nt.columns = ['lastname', 'age']
-      nt.columns.should.to.eql(['lastname', 'age'])
+      nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'age', title: 'age' }])
+    })
+
+    it('should have the given array object elements as columns name', () => {
+      nt.columns = ['lastname', { key: 'name', title: 'Le nom' }]
+      nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'name', title: 'Le nom' }])
     })
 
     it('should have the given array elements as columns name only when element is a string', () => {
       nt.columns = ['lastname', ['name'], 'age', 2, 'brother']
-      nt.columns.should.to.eql(['lastname', 'age', 'brother'])
+      nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'age', title: 'age' }, { key: 'brother', title: 'brother' }])
     })
   })