deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-21 07:46:42 +02:00
Code Issues Releases Wiki Activity

ensure table layout is fixed when cols widths are defined

Browse source
This commit is contained in:
koalyptus 2018-04-02 18:01:28 +10:00
parent 2f7b650f5b
commit 39bbe6a19a
10 changed files with 56 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/starter.html vendored
View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>tablefilter v0.6.22 - Starter</title> <title>tablefilter v0.6.23 - Starter</title>
</head> </head>
<body> <body>
<h1>tablefilter v0.6.22</h1> <h1>tablefilter v0.6.23</h1>

2
dist/tablefilter/style/tablefilter.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/tablefilter/tablefilter.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/tablefilter/tablefilter.js.map vendored
View file

File diff suppressed because one or more lines are too long

38
package-lock.json generated
View file

@ -1,6 +1,6 @@
{ {
"name": "tablefilter", "name": "tablefilter",
"version": "0.6.22", "version": "0.6.23",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -1936,7 +1936,7 @@
"circular-json": { "circular-json": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
"integrity": "sha1-gVyZ6oT2gJUp0vRXkb34JxE1LWY=", "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
"dev": true "dev": true
}, },
"class-utils": { "class-utils": {
@ -2802,7 +2802,7 @@
"doctrine": { "doctrine": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
"integrity": "sha1-XNAfwQFiG0LEzX9dGmYkNxbT850=", "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
"dev": true, "dev": true,
"requires": { "requires": {
"esutils": "2.0.2" "esutils": "2.0.2"
@ -3221,9 +3221,9 @@
"dev": true "dev": true
}, },
"eslint": { "eslint": {
"version": "4.19.0", "version": "4.19.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
"integrity": "sha512-r83L5CuqaocDvfwdojbz68b6tCUk8KJkqfppO+gmSAQqYCzTr0bCSMu6A6yFCLKG65j5eKcKUw4Cw4Yl4gfWkg==", "integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"ajv": "5.5.2", "ajv": "5.5.2",
@ -3241,7 +3241,7 @@
"file-entry-cache": "2.0.0", "file-entry-cache": "2.0.0",
"functional-red-black-tree": "1.0.1", "functional-red-black-tree": "1.0.1",
"glob": "7.1.2", "glob": "7.1.2",
"globals": "11.3.0", "globals": "11.4.0",
"ignore": "3.3.7", "ignore": "3.3.7",
"imurmurhash": "0.1.4", "imurmurhash": "0.1.4",
"inquirer": "3.3.0", "inquirer": "3.3.0",
@ -3257,7 +3257,7 @@
"path-is-inside": "1.0.2", "path-is-inside": "1.0.2",
"pluralize": "7.0.0", "pluralize": "7.0.0",
"progress": "2.0.0", "progress": "2.0.0",
"regexpp": "1.0.1", "regexpp": "1.1.0",
"require-uncached": "1.0.3", "require-uncached": "1.0.3",
"semver": "5.5.0", "semver": "5.5.0",
"strip-ansi": "4.0.0", "strip-ansi": "4.0.0",
@ -3307,16 +3307,16 @@
"debug": { "debug": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true, "dev": true,
"requires": { "requires": {
"ms": "2.0.0" "ms": "2.0.0"
} }
}, },
"globals": { "globals": {
"version": "11.3.0", "version": "11.4.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.3.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-11.4.0.tgz",
"integrity": "sha1-4E/be5eW2K2snI9kwUg3sjEzeLA=", "integrity": "sha512-Dyzmifil8n/TmSqYDEXbm+C8yitzJQqQIlJQLNRMwa+BOUJpRC19pyVeN12JAjt61xonvXjtff+hJruTRXn5HA==",
"dev": true "dev": true
}, },
"strip-ansi": { "strip-ansi": {
@ -6228,7 +6228,7 @@
"ignore": { "ignore": {
"version": "3.3.7", "version": "3.3.7",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz",
"integrity": "sha1-YSKJv7PCIOGGpYEYYY1b6MG6sCE=", "integrity": "sha512-YGG3ejvBNHRqu0559EOxxNFihD0AjpvHlC/pdGKd3X3ofe+CoJkYazwNJYTNebqpPKN+VVQbh4ZFn1DivMNuHA==",
"dev": true "dev": true
}, },
"import-local": { "import-local": {
@ -6668,7 +6668,7 @@
"is-resolvable": { "is-resolvable": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz", "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
"integrity": "sha1-+xj4fOH+uSUWnJpAfBkxijIG7Yg=", "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
"dev": true "dev": true
}, },
"is-retry-allowed": { "is-retry-allowed": {
@ -8920,7 +8920,7 @@
"pluralize": { "pluralize": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
"integrity": "sha1-KYuJ34uTsCIdv0Ia0rGx6iP8Z3c=", "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
"dev": true "dev": true
}, },
"pop-arrayify": { "pop-arrayify": {
@ -9485,9 +9485,9 @@
"dev": true "dev": true
}, },
"regexpp": { "regexpp": {
"version": "1.0.1", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.0.1.tgz", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
"integrity": "sha512-8Ph721maXiOYSLtaDGKVmDn5wdsNaF6Px85qFNeMPQq0r8K5Y10tgP6YuR65Ws35n4DvzFcCxEnRNBIXQunzLw==", "integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==",
"dev": true "dev": true
}, },
"regexpu-core": { "regexpu-core": {
@ -10013,7 +10013,7 @@
"slice-ansi": { "slice-ansi": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
"integrity": "sha1-BE8aSdiEL/MHqta1Be0Xi9lQE00=", "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-fullwidth-code-point": "2.0.0" "is-fullwidth-code-point": "2.0.0"

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "tablefilter", "name": "tablefilter",
"version": "0.6.22", "version": "0.6.23",
"description": "A Javascript library making HTML tables filterable and a bit more", "description": "A Javascript library making HTML tables filterable and a bit more",
"license": "MIT", "license": "MIT",
"author": { "author": {

31
src/tablefilter.js
View file

@ -1040,6 +1040,9 @@ export class TableFilter {
if (this.responsive) { if (this.responsive) {
addClass(this.dom(), this.prfxResponsive); addClass(this.dom(), this.prfxResponsive);
} }
if (this.colWidths.length > 0) {
this.setFixedLayout();
}
} }
/* Load extensions */ /* Load extensions */
@ -2509,17 +2512,35 @@ export class TableFilter {
} }
/** /**
* Set them columns' widths as per configuration * Make passed or default working table element width fixed
* @param {Element} tbl DOM element * @param {TableElement} tbl optional table DOM element
*/ */
setColWidths(tbl) { setFixedLayout(tbl = this.dom()) {
let colWidths = this.colWidths;
let tableWidth = tbl.clientWidth;
if (colWidths.length > 0) {
tableWidth = colWidths
.reduce((x, y) =>
parseInt((x || 0), 10) + parseInt((y || 0), 10)
);
}
tbl.style.width = `${tableWidth}px`;
tbl.style.tableLayout = 'fixed';
}
/**
* Set passed or default working table columns' widths with configuration
* values
* @param {TableElement} tbl optional table DOM element
*/
setColWidths(tbl = this.dom()) {
let colWidths = this.colWidths; let colWidths = this.colWidths;
if (colWidths.length === 0) { if (colWidths.length === 0) {
return; return;
} }
tbl = tbl || this.dom();
let colTags = tag(tbl, 'col'); let colTags = tag(tbl, 'col');
let tblHasColTag = colTags.length > 0; let tblHasColTag = colTags.length > 0;
let frag = !tblHasColTag ? doc.createDocumentFragment() : null; let frag = !tblHasColTag ? doc.createDocumentFragment() : null;

1
static/style/table.styl
View file

@ -26,6 +26,7 @@ table.TF
margin 0 margin 0
padding $padding padding $padding
border-bottom 1px solid $td-border-color border-bottom 1px solid $td-border-color
text-overflow ellipsis
// responsiveness // responsiveness
&.resp &.resp

4
static/templates/demo.html
View file

@ -48,8 +48,8 @@
}, },
col_widths: [ col_widths: [
'150px', '100px', '100px', '150px', '100px', '100px',
'70px', '70px', '70px', '90px', '90px', '90px',
'70px', '60px', '60px' '90px', '70px', '70px'
], ],
extensions:[{ name: 'sort' }] extensions:[{ name: 'sort' }]
}; };

3
test/test-col-widths.js
View file

@ -13,7 +13,8 @@
deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated'); deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
deepEqual(cols[1].style.width, '100px', 'Expected column width'); deepEqual(cols[1].style.width, '100px', 'Expected column width');
deepEqual(cols[4].style.width, '', 'Expected column width'); deepEqual(cols[4].style.width, '', 'Expected column width');
deepEqual(tf.dom().style.width, '', 'Table width not set'); deepEqual(tf.dom().style.width, '545px', 'Table width set');
deepEqual(tf.dom().style.tableLayout, 'fixed', 'Table layout fixed');
}); });
test('Grid layout column widths', function() { test('Grid layout column widths', function() {