Skip to content

Commit dcd3f95

Browse files
authored
Merge pull request #11 from Mindsers/develop
Columns improvements
2 parents ac60de1 + 7dd0c8f commit dcd3f95

File tree

4 files changed

+54
-21
lines changed

4 files changed

+54
-21
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ Nativetable is a simple native es6 module to create and work with dynamics HTML
99

1010
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.
1111

12+
Check the [demo](https://mindsers.github.io/nativetable/) page.
13+
1214
## Installation
1315

1416
You can build your own Nativetable with this project.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "nativetable",
33
"version": "1.0.0",
44
"description": "Create and use dynamics HTML tables with native JS",
5-
"repository": "https://git.nathanaelcherrier.com/mindsers/nativetable.git",
5+
"repository": "https://github.com/Mindsers/nativetable",
66
"main": "dist/nativetable.min.js",
77
"scripts": {
88
"build:js": "rollup -c",

src/nativetable/nativetable.js

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export default class Nativetable {
278278
/**
279279
* Colum's nouns getter
280280
*
281-
* @return {string[]} - colum's nouns
281+
* @return {Object[]} - column
282282
*/
283283
get columns() {
284284
let headers = this.options.columns || []
@@ -299,14 +299,19 @@ export default class Nativetable {
299299
}
300300
})
301301

302-
this.options.columns = headers
302+
this.options.columns = headers.map((el) => {
303+
return {
304+
key: el,
305+
title: el
306+
}
307+
})
303308
return this.options.columns
304309
}
305310

306311
/**
307312
* Colum's nouns setter
308313
*
309-
* @param {string[]} value - colum's nouns
314+
* @param {string[]|Object[]} value - column
310315
*/
311316
set columns(value) {
312317
this.options.columns = []
@@ -315,11 +320,24 @@ export default class Nativetable {
315320
return
316321
}
317322

318-
for (let noun of value) {
319-
if (typeof noun === 'string') {
320-
this.options.columns.push(noun)
323+
for (let columns of value) {
324+
let { key, title } = columns
325+
326+
if (typeof columns === 'string') {
327+
key = title = columns
328+
}
329+
330+
if (typeof key === 'undefined' || typeof title === 'undefined') {
331+
continue
321332
}
333+
334+
this.options.columns.push({
335+
key,
336+
title
337+
})
322338
}
339+
340+
this.options.reloading.headers = true
323341
}
324342

325343
/**
@@ -467,7 +485,7 @@ export default class Nativetable {
467485
/**
468486
* Builder for table header
469487
*
470-
* @param {string[]} cols - Array of columns
488+
* @param {Object[]} cols - Array of columns
471489
*
472490
* @return {HTMLElement} A thead HTML tag
473491
*/
@@ -479,27 +497,26 @@ export default class Nativetable {
479497

480498
theadTag.classList.add('nt-head')
481499

482-
for (let name of columns) {
500+
for (let { key, title } of columns) {
483501
let tdTag = document.createElement('td')
484-
tdTag.textContent = name
502+
tdTag.textContent = title
503+
tdTag.dataset.ntColumnName = key
485504

486505
if (this.options.sorting.activated) {
487506
const glyphList = {
488507
asc: '<span class="nt-icon nt-icon-sort-asc"></span>',
489508
desc: '<span class="nt-icon nt-icon-sort-desc"></span>',
490509
none: '<span class="nt-icon nt-icon-sort-none"></span>'
491510
}
492-
let order = this.options.sorting.column === name ? this.options.sorting.order : 'none'
511+
let order = this.options.sorting.column === key ? this.options.sorting.order : 'none'
493512
let glyph = glyphList[order]
494513
let aTag = document.createElement('a')
495514

496515
aTag.href = '#'
497516
aTag.addEventListener('click', this.onSortingClick.bind(this))
498-
aTag.innerHTML = `${name} ${glyph}`
517+
aTag.innerHTML = `${title} ${glyph}`
499518

500-
tdTag.dataset.ntColumnName = name
501519
tdTag.textContent = ''
502-
503520
tdTag.appendChild(aTag)
504521
}
505522

@@ -531,9 +548,9 @@ export default class Nativetable {
531548
trTag.classList.add('nt-row')
532549
trTag.dataset.ntObject = this.objectSignature(row)
533550

534-
for (let name of columns) {
551+
for (let { key } of columns) {
535552
let tdTag = document.createElement('td')
536-
tdTag.textContent = typeof row[name] === 'undefined' ? '' : row[name]
553+
tdTag.textContent = typeof row[key] === 'undefined' ? '' : row[key]
537554
trTag.appendChild(tdTag)
538555
}
539556

test/nativetable.js

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -412,18 +412,27 @@ describe('Nativetable', () => {
412412
})
413413

414414
describe('#columns', () => {
415+
let expected = [
416+
{ key: 'id', title: 'id' },
417+
{ key: 'name', title: 'name' },
418+
{ key: 'lastname', title: 'lastname' },
419+
{ key: 'age', title: 'age' },
420+
{ key: 'man', title: 'man' },
421+
{ key: 'brother', title: 'brother' }
422+
]
423+
415424
it('should have datasource keys as columns name', () => {
416-
nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
425+
nt.columns.should.to.eql(expected)
417426
})
418427

419428
it('should have datasource keys as columns name by default', () => {
420429
nt.options.columns = null
421-
nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
430+
nt.columns.should.to.eql(expected)
422431
})
423432

424433
it('should have datasource keys as columns name when user would force empty array', () => {
425434
nt.columns = []
426-
nt.columns.should.to.eql(['id', 'name', 'lastname', 'age', 'man', 'brother'])
435+
nt.columns.should.to.eql(expected)
427436
})
428437

429438
it('should replace _column by an empty array if user try to set columns as null', () => {
@@ -434,12 +443,17 @@ describe('Nativetable', () => {
434443

435444
it('should have the given array elements as columns name', () => {
436445
nt.columns = ['lastname', 'age']
437-
nt.columns.should.to.eql(['lastname', 'age'])
446+
nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'age', title: 'age' }])
447+
})
448+
449+
it('should have the given array object elements as columns name', () => {
450+
nt.columns = ['lastname', { key: 'name', title: 'Le nom' }]
451+
nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'name', title: 'Le nom' }])
438452
})
439453

440454
it('should have the given array elements as columns name only when element is a string', () => {
441455
nt.columns = ['lastname', ['name'], 'age', 2, 'brother']
442-
nt.columns.should.to.eql(['lastname', 'age', 'brother'])
456+
nt.columns.should.to.eql([{ key: 'lastname', title: 'lastname' }, { key: 'age', title: 'age' }, { key: 'brother', title: 'brother' }])
443457
})
444458
})
445459

0 commit comments

Comments
 (0)