├── .github └── FUNDING.yml ├── .eslintignore ├── css ├── fixedColumns.bootstrap4.scss ├── fixedColumns.foundation.scss ├── fixedColumns.jqueryui.scss ├── fixedColumns.bootstrap.scss ├── fixedColumns.bootstrap5.scss ├── fixedColumns.semanticui.scss ├── fixedColumns.bulma.scss └── fixedColumns.dataTables.scss ├── .gitignore ├── src ├── fixedColumns.bulma.ts ├── fixedColumns.jqueryui.ts ├── fixedColumns.bootstrap.ts ├── fixedColumns.bootstrap4.ts ├── fixedColumns.bootstrap5.ts ├── fixedColumns.foundation.ts ├── fixedColumns.semanticui.ts ├── fixedColumns.dataTables.ts ├── index.ts └── FixedColumns.ts ├── types ├── fixedColumns.bulma.d.ts ├── fixedColumns.jqueryui.d.ts ├── fixedColumns.bootstrap.d.ts ├── fixedColumns.bootstrap4.d.ts ├── fixedColumns.bootstrap5.d.ts ├── fixedColumns.dataTables.d.ts ├── fixedColumns.foundation.d.ts ├── fixedColumns.semanticui.d.ts └── types.d.ts ├── bower.json ├── rollup.config.js ├── examples ├── integration │ ├── index.xml │ ├── fixedHeader.xml │ ├── keytable.xml │ ├── select.xml │ ├── autofill.xml │ ├── rowReorder.xml │ ├── select-checkbox.xml │ ├── api.xml │ └── fixedHeaderFooter.xml ├── initialisation │ ├── index.xml │ ├── two_columns.xml │ ├── complex-header.xml │ ├── left_right_columns.xml │ ├── right_column.xml │ ├── size_fixed.xml │ ├── size_fluid.xml │ ├── server-side-processing.xml │ ├── button.xml │ ├── colvis.xml │ ├── simple.xml │ ├── index_column.xml │ ├── api.xml │ └── scrollX.xml ├── styling │ ├── index.xml │ ├── foundation.xml │ ├── jqueryui.xml │ ├── bulma.xml │ ├── bootstrap5.xml │ ├── bootstrap4.xml │ ├── bootstrap.xml │ ├── semanticui.xml │ ├── rtl.xml │ └── col_filter.xml └── index.xml ├── Issue_template.txt ├── tsconfig.json ├── docs ├── api │ ├── fixedColumns().xml │ ├── fixedColumns().end().xml │ ├── fixedColumns().start().xml │ ├── fixedColumns().left().xml │ └── fixedColumns().right().xml ├── option │ ├── language.fixedColumns.button.xml │ ├── fixedColumns.left.xml │ ├── fixedColumns.end.xml │ ├── fixedColumns.right.xml │ ├── fixedColumns.start.xml │ ├── fixedColumns.rightColumns.xml │ ├── fixedColumns.leftColumns.xml │ └── fixedColumns.xml └── button │ └── fixedColumns.xml ├── test ├── api │ ├── destroy.js │ ├── fixedColumns().left().js │ ├── fixedColumns().right().js │ ├── fixedColumns().end().js │ └── fixedColumns().start().js └── option │ ├── language.fixedColumns.button.js │ ├── leftColumns.js │ ├── rightColumns.js │ ├── fixedColumns.start.js │ └── fixedColumns.end.js ├── License.txt ├── package.json ├── make.sh ├── Readme.md └── .eslintrc.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .eslintrc.js -------------------------------------------------------------------------------- /css/fixedColumns.bootstrap4.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.bootstrap.scss'; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | 4 | types/FixedColumns.d.ts 5 | types/index.d.ts 6 | -------------------------------------------------------------------------------- /src/fixedColumns.bulma.ts: -------------------------------------------------------------------------------- 1 | /*! Bulma integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.jqueryui.ts: -------------------------------------------------------------------------------- 1 | /*! jquery ui integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.bootstrap.ts: -------------------------------------------------------------------------------- 1 | /*! Bootstrap integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.bootstrap4.ts: -------------------------------------------------------------------------------- 1 | /*! Bootstrap 4 integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.bootstrap5.ts: -------------------------------------------------------------------------------- 1 | /*! Bootstrap 5 integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.foundation.ts: -------------------------------------------------------------------------------- 1 | /*! Foundation integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.semanticui.ts: -------------------------------------------------------------------------------- 1 | /*! Semantic ui integration for DataTables' FixedColumns 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | -------------------------------------------------------------------------------- /src/fixedColumns.dataTables.ts: -------------------------------------------------------------------------------- 1 | 2 | /*! DataTables integration for DataTables' FixedColumns 3 | * © SpryMedia Ltd - datatables.net/license 4 | */ 5 | -------------------------------------------------------------------------------- /types/fixedColumns.bulma.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.jqueryui.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.bootstrap.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.bootstrap4.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.bootstrap5.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.dataTables.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.foundation.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /types/fixedColumns.semanticui.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import DataTable from 'datatables.net-fixedcolumns'; 3 | 4 | export default DataTable; 5 | export * from 'datatables.net-fixedcolumns'; 6 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "datatables-fixedcolumns", 3 | "main": [ 4 | "js/dataTables.fixedColumns.js", 5 | "css/fixedColumns.dataTables.scss" 6 | ], 7 | "dependencies": { 8 | "jquery": ">=1.7.0", 9 | "datatables": ">=1.8.0" 10 | }, 11 | "license": "MIT" 12 | } 13 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve'; 2 | 3 | export default [ 4 | { 5 | input: 'src/index.js', 6 | output: { 7 | file: process.env.OUT + '/js/dataTables.fixedColumns.js', 8 | format: 'iife' 9 | }, 10 | plugins: [resolve()] 11 | } 12 | ]; 13 | -------------------------------------------------------------------------------- /examples/integration/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Integration 5 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/initialisation/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Initialisation 5 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/styling/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Styling 5 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Issue_template.txt: -------------------------------------------------------------------------------- 1 | Please post support requests and questions in the DataTables forums at https://datatables.net/forums. Support requests posted here will be closed. The intention of this request is to allow all questions to be located in a single, searchable, location. 2 | 3 | When you post your question in the DataTables forums, please ensure that you include a link to the page showing the issue so it can be debugged. 4 | -------------------------------------------------------------------------------- /css/fixedColumns.foundation.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.dataTables.scss'; 3 | 4 | :root { 5 | --dtfc-thead-cell_background: rgb(248, 248, 248); 6 | } 7 | 8 | table.dataTable { 9 | // Due to Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=712847 10 | // And Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1450584 11 | // It isn't possible to use border-collapse with FixedColumns, which 12 | // make use of position: sticky 13 | border-collapse: separate; 14 | border-spacing: inherit; 15 | 16 | &.table-bordered { 17 | border-left-width: 0; 18 | border-bottom-width: 0; 19 | 20 | th, td { 21 | border-right-width: 0; 22 | border-top-width: 0; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /examples/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FixedColumns examples 5 | 6 | 7 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES3", 4 | "module": "ES6", 5 | "lib": ["es2017", "es2016", "dom"], 6 | "allowUnreachableCode": true, 7 | "allowSyntheticDefaultImports": true, 8 | "pretty": true, 9 | "declaration": true 10 | }, 11 | "exclude": [ 12 | "./node_modules/**/*" 13 | ], 14 | "files": [ 15 | "src/index.ts", 16 | "src/fixedColumns.dataTables.ts", 17 | "src/fixedColumns.bootstrap4.ts", 18 | "src/fixedColumns.bootstrap5.ts", 19 | "src/fixedColumns.bootstrap.ts", 20 | "src/fixedColumns.bulma.ts", 21 | "src/fixedColumns.foundation.ts", 22 | "src/fixedColumns.jqueryui.ts", 23 | "src/fixedColumns.semanticui.ts", 24 | ] 25 | } -------------------------------------------------------------------------------- /css/fixedColumns.jqueryui.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.dataTables.scss'; 3 | 4 | div.dtfc-top-blocker { 5 | border-bottom: none !important; 6 | background-color: rgb(246, 246, 246) !important; 7 | border-top: 1px solid #c5c5c5 !important; 8 | } 9 | 10 | table.dataTable { 11 | thead > tr > *.ui-state-default { 12 | background: #f6f6f6; 13 | } 14 | 15 | thead > tr > .dtfc-fixed-right { 16 | border-left: 1px solid #c5c5c5; 17 | } 18 | } 19 | 20 | tr.dt-rowReorder-moving { 21 | td.dtfc-fixed-start, 22 | td.dtfc-fixed-end { 23 | border-top: 2px solid #555 !important; 24 | border-bottom: 2px solid #555 !important; 25 | } 26 | 27 | td.dtfc-fixed-start:first-child { 28 | border-left: 2px solid #555 !important; 29 | } 30 | 31 | td.dtfc-fixed-end:last-child { 32 | border-right: 2px solid #555 !important; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /docs/api/fixedColumns().xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns() 4 | Namespace for FixedColumns methods 5 | 3.1.0 6 | 7 | 8 | fixedColumns() 9 | 10 | DataTables API instance with the FixedColumns methods available. 11 | 12 | 13 | Namespacing for FixedColumns methods - FixedColumns' methods are available on the returned API instance. 14 | 15 | 16 | 17 | 18 | This method does not perform any functions itself, but rather serves as a simple namespacing method to group the other methods that FixedColumns makes available. Please refer to the documentation for those methods for full details on how they can be used. 19 | 20 | 21 | -------------------------------------------------------------------------------- /css/fixedColumns.bootstrap.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.dataTables.scss'; 3 | 4 | div.dtfc-top-blocker, 5 | div.dtfc-top-blocker { 6 | border-bottom: 0px solid #ddd !important; 7 | } 8 | 9 | table.dataTable { 10 | // Due to Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=712847 11 | // And Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1450584 12 | // It isn't possible to use border-collapse with FixedColumns, which 13 | // make use of position: sticky 14 | border-collapse: separate; 15 | 16 | &.table-bordered { 17 | border-left-width: 0; 18 | border-right-width: 0; 19 | 20 | th, 21 | td { 22 | border-right-width: 0; 23 | border-top-width: 0; 24 | } 25 | 26 | th:last-child, 27 | td:last-child { 28 | border-right: 1px solid #dee2e6;; 29 | } 30 | 31 | tr:last-child { 32 | th, 33 | td { 34 | border-bottom-width: 0; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/styling/foundation.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | Foundation 30 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/styling/jqueryui.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | jQuery UI 30 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/styling/bulma.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | div.container { 6 | width: 960px; 7 | } 8 | 9 | 10 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | Bulma 34 | 35 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /css/fixedColumns.bootstrap5.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.bootstrap4.scss'; 3 | 4 | table.dataTable { 5 | thead, 6 | tfoot { 7 | tr > .dtfc-fixed-start, 8 | tr > .dtfc-fixed-end { 9 | background-color: var(--bs-table-bg); 10 | } 11 | } 12 | 13 | tbody { 14 | tr > .dtfc-fixed-start, 15 | tr > .dtfc-fixed-end { 16 | background-color: var(--bs-table-bg); 17 | } 18 | } 19 | } 20 | 21 | div.dtfc-top-blocker, 22 | div.dtfc-bottom-blocker { 23 | background-color: var(--bs-body-bg); 24 | } 25 | 26 | div.dt-scroll-body { 27 | border-left-color: var(--bs-table-color) !important; 28 | } 29 | 30 | div.dt-scroll-headInner, 31 | div.dt-scroll-footInner { 32 | table.table-bordered { 33 | tr { 34 | th:first-child { 35 | border-left-color: var(--bs-border-color) !important; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /css/fixedColumns.semanticui.scss: -------------------------------------------------------------------------------- 1 | 2 | @use 'fixedColumns.dataTables.scss'; 3 | 4 | :root { 5 | --dtfc-thead-cell_background: #f9fafb; 6 | } 7 | 8 | table.dataTable { 9 | border-left: none !important; 10 | border-right: none !important; 11 | 12 | tr { 13 | border-left-width: 0px; 14 | 15 | th:first-child, 16 | td:first-child { 17 | border-left: 1px solid rgba(34, 36, 38, 0.15) !important; 18 | } 19 | 20 | th:last-child, 21 | td:last-child { 22 | border-right: 1px solid rgba(34, 36, 38, 0.15); 23 | } 24 | } 25 | } 26 | 27 | div.dtfc-top-blocker { 28 | border-bottom: none !important; 29 | } 30 | 31 | tr.dt-rowReorder-moving { 32 | td.dtfc-fixed-start, 33 | td.dtfc-fixed-end { 34 | border-top: 2px solid #888 !important; 35 | border-bottom: 2px solid #888 !important; 36 | } 37 | 38 | td.dtfc-fixed-start:first-child { 39 | border-left: 2px solid #888 !important; 40 | } 41 | 42 | td.dtfc-fixed-end:last-child { 43 | border-right: 2px solid #888 !important; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /test/api/destroy.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - destroy', function () { 2 | dt.libs({ 3 | js: ['jquery', 'datatables', 'fixedcolumns'], 4 | css: ['datatables', 'fixedcolumns'] 5 | }); 6 | 7 | let table; 8 | 9 | describe('Check the defaults', function () { 10 | dt.html('basic'); 11 | it('Initialisation inserts a blocker', function () { 12 | table = $('#example').DataTable({ 13 | fixedColumns: true, 14 | scrollX: true 15 | }); 16 | expect($('div.dtfc-top-blocker').length).toBe(1); 17 | }); 18 | it('After re-init has just one still', function () { 19 | table = $('#example').DataTable({ 20 | fixedColumns: true, 21 | scrollX: true, 22 | destroy: true 23 | }); 24 | expect($('div.dtfc-top-blocker').length).toBe(1); 25 | }); 26 | it('And a third init still has one', function () { 27 | $('#example').DataTable().destroy(); 28 | table = $('#example').DataTable({ 29 | fixedColumns: true, 30 | scrollX: true 31 | }); 32 | expect($('div.dtfc-top-blocker').length).toBe(1); 33 | }); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /examples/styling/bootstrap5.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | Bootstrap 5 30 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/styling/bootstrap4.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | Bootstrap 4 30 | 31 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css/fixedColumns.bulma.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | @use 'fixedColumns.dataTables.scss'; 4 | 5 | table.dataTable { 6 | // Due to Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=712847 7 | // And Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1450584 8 | // It isn't possible to use border-collapse with FixedColumns, which 9 | // make use of position: sticky 10 | border-collapse: separate; 11 | 12 | &.table-bordered { 13 | border-left-width: 0; 14 | border-bottom-width: 0; 15 | 16 | th, td { 17 | border-right-width: 0; 18 | border-top-width: 0; 19 | } 20 | } 21 | } 22 | 23 | div.dtfc-top-blocker { 24 | border-bottom: none !important; 25 | } 26 | 27 | tr.dt-rowReorder-moving { 28 | td.dtfc-fixed-start, 29 | td.dtfc-fixed-end { 30 | border-top: 2px solid #888 !important; 31 | border-bottom: 2px solid #888 !important; 32 | } 33 | 34 | td.dtfc-fixed-start:first-child { 35 | border-left: 2px solid #888 !important; 36 | } 37 | 38 | td.dtfc-fixed-end:last-child { 39 | border-right: 2px solid #888 !important; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /examples/integration/fixedHeader.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | 19 | 29 | 30 | 31 | FixedHeader 32 | 33 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /examples/styling/bootstrap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | Bootstrap 3 30 | 31 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/integration/keytable.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | 19 | 29 | 30 | 31 | KeyTable 32 | 33 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /License.txt: -------------------------------------------------------------------------------- 1 | MIT license 2 | 3 | Copyright (c) 2010-2016 SpryMedia Limited 4 | http://datatables.net 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /docs/option/language.fixedColumns.button.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | language.fixedColumns.button 4 | Set FixedColumns button text 5 | 4.0.0 6 | 7 | 8 | 9 | The language string to be displayed within the FixedColumns button. 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 39 | 40 | i18n() 41 | 42 | -------------------------------------------------------------------------------- /examples/initialisation/two_columns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 24 | 25 | 26 | 27 | 38 | 39 | 40 | Multiple fixed columns 41 | 42 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/integration/select.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | 19 | 29 | 30 | 31 | Select - whole row 32 | 33 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /examples/styling/semanticui.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* force scrolling for demo */ 6 | div.dataTables_wrapper { 7 | max-width: 800px; 8 | margin: 0 auto; 9 | } 10 | 11 | 12 | 21 | 22 | 23 | 24 | 33 | 34 | 35 | Fomantic-UI (formally Semantic-UI) styling 36 | 37 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.left.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.left 4 | Number of columns to fix to the left of the table 5 | 3.1.0 6 | 7 | 8 | 9 | The number of columns on the left hand side of the table to fix in place. 10 | 11 | 12 | 13 | 14 | 15 | 16 | This option can be used to set the number of columns that will be fixed to the left hand-side of a table. 17 | 18 | As of FixedColumns 5 it is text direction aware and will always fixed to the left of the table, regardless of the text direction. 19 | 20 | `-init fixedColumns.start` is generally preferred over this option as it is independent of text direction. 21 | 22 | 23 | 30 | 31 | 39 | 40 | -------------------------------------------------------------------------------- /examples/integration/autofill.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 23 | 24 | 25 | 26 | 36 | 37 | 38 | AutoFill 39 | 40 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.end.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.end 4 | Number of columns to fix to the end of the table 5 | 5.0.0 6 | 7 | 8 | 9 | The number of columns on the end of the table to fix in place. 10 | 11 | 12 | 13 | 14 | No columns will be fixed to the end of the table. 15 | 16 | 17 | 18 | Very similar to the `-init fixedColumns.start` option, but in this case the option defines the number of columns that will be fixed at the end of the table. 19 | 20 | This option is text direction aware - it will fix columns on the left for tables which are displayed with right-to-left text layout. 21 | 22 | Columns that are not visible will be ignored. 23 | 24 | 25 | 32 | 33 | 41 | 42 | -------------------------------------------------------------------------------- /examples/integration/rowReorder.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 600px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 23 | 24 | 25 | 26 | 36 | 37 | 38 | RowReorder 39 | 40 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.right.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.right 4 | Number of columns to fix to the right of the table 5 | 3.1.0 6 | 7 | 8 | 9 | The number of columns on the right hand side of the table to fix in place. 10 | 11 | 12 | 13 | 14 | No columns will be fixed to the right hand side of the table. 15 | 16 | 17 | 18 | This option can be used to set the number of columns that will be fixed to the right hand-side of a table. 19 | 20 | As of FixedColumns 5 it is text direction aware and will always fixed to the right of the table, regardless of the text direction. 21 | 22 | `-init fixedColumns.end` is generally preferred over this option as it is independent of text direction. 23 | 24 | 25 | 32 | 33 | 41 | 42 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.start.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.start 4 | Number of columns to fix to the start of the table 5 | 5.0.0 6 | 7 | 8 | 9 | The number of columns on the start of the table to fix in place. 10 | 11 | 12 | 13 | 14 | Fix the first column of the table in place. 15 | 16 | 17 | 18 | This option is used to define the number of fixed columns at the start of the table. By default this is a single column, but you can choose to fix two or more in place, as required by your table. 19 | 20 | Please note that this option is independent of the text direction of the table - i.e. it will fix columns to the right of the table for right-to-left languages. 21 | 22 | Columns that are not visible will be ignored. 23 | 24 | 25 | 32 | 33 | 41 | 42 | -------------------------------------------------------------------------------- /examples/initialisation/complex-header.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 24 | 25 | 26 | 27 | 38 | 39 | 40 | Complex headers 41 | 42 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /examples/initialisation/left_right_columns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 25 | 26 | 27 | 28 | 40 | 41 | 42 | Start and end fixed columns 43 | 44 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /examples/initialisation/right_column.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 25 | 26 | 27 | 28 | 40 | 41 | 42 | End column only 43 | 44 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/button/fixedColumns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns 4 | A single button that initialises and allows FixedColumns to be toggled. 5 | 4.0.0 6 | 7 | 8 | This button type initialises FixedColumns and then when pressed the columns are toggled between being fixed to the table and not fixed to the table. 9 | 10 | 11 | 14 | 17 | 18 | 23 | 24 | 37 | -------------------------------------------------------------------------------- /examples/styling/rtl.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 24 | 25 | 26 | 27 | 38 | 39 | 40 | Right-to-left text direction 41 | 42 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test/option/language.fixedColumns.button.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - language.fixedColumns.button', function () { 2 | let table; 3 | 4 | dt.libs({ 5 | js: ['jquery', 'datatables', 'buttons', 'fixedcolumns'], 6 | css: ['datatables', 'buttons', 'fixedcolumns'] 7 | }); 8 | 9 | describe('Functional tests', function () { 10 | dt.html('basic'); 11 | it('Check the defaults', function () { 12 | table = $('#example').DataTable({ 13 | dom: 'Blfrtip', 14 | scrollX: true, 15 | buttons: ['fixedColumns'] 16 | }); 17 | 18 | expect($('.dt-buttons button').text()).toBe('FixedColumns'); 19 | }); 20 | 21 | dt.html('basic'); 22 | it('Change language setting', function () { 23 | table = $('#example').DataTable({ 24 | dom: 'Blfrtip', 25 | scrollX: true, 26 | language: { 27 | buttons: { 28 | fixedColumns: 'test1' 29 | } 30 | }, 31 | buttons: ['fixedColumns'] 32 | }); 33 | 34 | expect($('.dt-buttons button').text()).toBe('test1'); 35 | }); 36 | 37 | // DD-2157 38 | dt.html('basic'); 39 | it('Button customisation takes precedence', function () { 40 | table = $('#example').DataTable({ 41 | dom: 'Blfrtip', 42 | scrollX: true, 43 | language: { 44 | buttons: { 45 | fixedColumns: 'language' 46 | } 47 | }, 48 | buttons: [{ 49 | extend: 'fixedColumns', 50 | text: 'button' 51 | }] 52 | }); 53 | 54 | expect($('.dt-buttons button').text()).toBe('button'); 55 | }); 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "datatables.net-fixedcolumns", 3 | "version": "4.0.0", 4 | "description": "FixedColumns for DataTables", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs", 8 | "example": "examples", 9 | "test": "test" 10 | }, 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "lint": "eslint ./src/*.ts --ext .ts", 14 | "lintFix": "eslint ./src/*.ts --fix" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/DataTables/FixedColumns.git" 19 | }, 20 | "author": "SpryMedia ltd", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/DataTables/FxedColumns/issues" 24 | }, 25 | "homepage": "https://github.com/DataTables/FixedColumns#readme", 26 | "dependencies": { 27 | "@rollup/plugin-node-resolve": "^13.0.0", 28 | "rollup": "^2.52.0" 29 | }, 30 | "devDependencies": { 31 | "@types/jquery": "^3.3.31", 32 | "@types/node": "^12.0.10", 33 | "@typescript-eslint/eslint-plugin": "^4.24.0", 34 | "@typescript-eslint/parser": "^4.24.0", 35 | "eslint": "^7.26.0", 36 | "eslint-plugin-import": "^2.23.2", 37 | "eslint-plugin-jsdoc": "^34.7.0", 38 | "eslint-plugin-typescript-sort-keys": "^1.6.0", 39 | "tslint": "^5.20.1", 40 | "tslint-eslint-rules": "^5.4.0", 41 | "typescript": "^3.9.9" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /docs/api/fixedColumns().end().xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns().end() 4 | Get / set the number of columns fixed at the end of a table 5 | 5.0.0 6 | 7 | 8 | fixedColumns().end() 9 | 10 | The number of columns that are fixed to the end of a table. 11 | 12 | 13 | Getter for the number of columns fixed to the end of a table. 14 | 15 | 16 | 17 | 18 | fixedColumns().end(val) 19 | 20 | The new number of columns to fix to the end. 21 | 22 | 23 | DataTables Api for chaining. 24 | 25 | 26 | Updates the DataTable to fix the new number of columns to the end of the table. 27 | 28 | 29 | 30 | 31 | This method is either a getter or a setter for the number of columns that are fixed to the end of the table. If no argument is supplied then the method acts as a getter. If an argument is provided then that value is set as the new number of columns to be fixed to the end and the table is updated. 32 | 33 | This method is text direction aware. It will freeze columns at the end of the table regardless of text direction (i.e. on the right for left-to-right text and on the left for right-to-left text). 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/api/fixedColumns().start().xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns().start() 4 | Get / set the number of columns fixed at the start of a table 5 | 5.0.0 6 | 7 | 8 | fixedColumns().start() 9 | 10 | The number of columns that are fixed to the start of a table. 11 | 12 | 13 | Getter for the number of columns fixed to the start of a table. 14 | 15 | 16 | 17 | 18 | fixedColumns().start( val ) 19 | 20 | The new number of columns to fix to the start of a table. 21 | 22 | 23 | DataTables Api for chaining. 24 | 25 | 26 | Updates the DataTable to fix the new number of columns to the start of the table. 27 | 28 | 29 | 30 | 31 | This method is either a getter or a setter for the number of columns that are fixed to the start of the table. If no argument is supplied then the method acts as a getter. If an argument is provided then that value is set as the new number of columns to be fixed to the start and the table is updated. 32 | 33 | This method is text direction aware. It will freeze columns at the start of the table regardless of text direction (i.e. on the left for left-to-right text and on the right for right-to-left text). 34 | 35 | 36 | -------------------------------------------------------------------------------- /make.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | DT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )/../.." 4 | if [ "$1" = "debug" ]; then 5 | DEBUG="debug" 6 | else 7 | OUT_DIR=$1 8 | DEBUG=$2 9 | fi 10 | 11 | # If not run from DataTables build script, redirect to there 12 | if [ -z "$DT_BUILD" ]; then 13 | cd $DT_DIR/build 14 | ./make.sh extension FixedColumns $DEBUG 15 | cd - 16 | exit 17 | fi 18 | 19 | # Change into script's own dir 20 | cd $(dirname $0) 21 | 22 | DT_SRC=$(dirname $(dirname $(pwd))) 23 | DT_BUILT="${DT_SRC}/built/DataTables" 24 | . $DT_SRC/build/include.sh 25 | 26 | # Copy CSS 27 | rsync -r css $OUT_DIR 28 | css_frameworks fixedColumns $OUT_DIR/css 29 | 30 | if [ ! -d "node_modules" ]; then 31 | npm install 32 | fi 33 | 34 | # Copy images 35 | #rsync -r images $OUT_DIR 36 | 37 | node_modules/typescript/bin/tsc 38 | 39 | # Copy JS 40 | HEADER="$(head -n 3 src/index.ts)" 41 | 42 | rsync -r src/*.js $OUT_DIR/js 43 | js_frameworks fixedColumns $OUT_DIR/js "jquery datatables.net-FW datatables.net-fixedcolumns" 44 | 45 | OUT=$OUT_DIR ./node_modules/rollup/dist/bin/rollup \ 46 | --banner "$HEADER" \ 47 | --config rollup.config.js 48 | 49 | rm src/*.d.ts 50 | rm src/*.js 51 | 52 | # Copy Types 53 | if [ -d $OUT_DIR/types ]; then 54 | rm -r $OUT_DIR/types 55 | fi 56 | mkdir $OUT_DIR/types 57 | 58 | cp types/* $OUT_DIR/types 59 | 60 | js_wrap $OUT_DIR/js/dataTables.fixedColumns.js "jquery datatables.net" 61 | 62 | # Copy and build examples 63 | rsync -r examples $OUT_DIR 64 | examples_process $OUT_DIR/examples 65 | 66 | # Readme and license 67 | cp Readme.md $OUT_DIR 68 | cp License.txt $OUT_DIR 69 | 70 | -------------------------------------------------------------------------------- /docs/api/fixedColumns().left().xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns().left() 4 | Get / set the number of fixed columns on the left side of a table 5 | 4.0.0 6 | 7 | 8 | fixedColumns().left() 9 | 10 | The number of columns that are fixed to the left. 11 | 12 | 13 | Getter for the number of columns fixed to the left. 14 | 15 | 16 | 17 | 18 | fixedColumns().left(val) 19 | 20 | The new number of columns to fix to the left. As of FixedColumns 4.3 a check is made to make sure that the value given is with in the range of 0 to the number of columns in the table (inclusive). 21 | 22 | 23 | DataTables Api for chaining. 24 | 25 | 26 | Updates the DataTable to fix the new number of columns to the left. 27 | 28 | 29 | 30 | 31 | This method is either a getter or a setter for the number of columns that are fixed to the left of the table. If no argument is supplied then the method acts as a getter. If an argument is provided then that value is set as the new number of columns to be fixed to the left and the table is updated. 32 | 33 | As of FixedColumns 5 this method is text direction aware and will fix columns at the left hand side of the table regardless of text direction. 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/api/fixedColumns().right().xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns().right() 4 | Get / set the number of fixed columns on the right side of a table 5 | 4.0.0 6 | 7 | 8 | fixedColumns().right() 9 | 10 | The number of columns that are fixed to the right. 11 | 12 | 13 | Getter for the number of columns fixed to the right. 14 | 15 | 16 | 17 | 18 | fixedColumns().right(val) 19 | 20 | The new number of columns to fix to the right. As of FixedColumns 4.3 a check is made to make sure that the value given is with in the range of 0 to the number of columns in the table (inclusive). 21 | 22 | 23 | DataTables Api for chaining. 24 | 25 | 26 | Updates the DataTable to fix the new number of columns to the right. 27 | 28 | 29 | 30 | 31 | This method is either a getter or a setter for the number of columns that are fixed to the right of the table. If no argument is supplied then the method acts as a getter. If an argument is provided then that value is set as the new number of columns to be fixed to the right and the table is updated. 32 | 33 | As of FixedColumns 5 this method is text direction aware and will fix columns at the right hand side of the table regardless of text direction. 34 | 35 | 36 | -------------------------------------------------------------------------------- /examples/initialisation/size_fixed.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | margin: 0 auto; 9 | } 10 | 11 | div.container { 12 | width: 80%; 13 | } 14 | 15 | 16 | 26 | 27 | 28 | 29 | 39 | 40 | 41 | Assigned column width 42 | 43 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/initialisation/size_fluid.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | margin: 0 auto; 9 | } 10 | 11 | div.container { 12 | width: 80%; 13 | } 14 | 15 | 16 | 26 | 27 | 28 | 29 | 39 | 40 | 41 | Fluid column width 42 | 43 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/initialisation/server-side-processing.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 600px; 9 | margin: 0 auto; 10 | } 11 | 12 | /* Lots of padding for the cells as SSP has limited data in the demo */ 13 | th, 14 | td { 15 | padding-left: 40px !important; 16 | padding-right: 40px !important; 17 | } 18 | 19 | 20 | 30 | 31 | 32 | 33 | 43 | 44 | 45 | Server-side processing 46 | 47 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /examples/styling/col_filter.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | th input { 13 | width: 90%; 14 | } 15 | 16 | 17 | ' 26 | ); 27 | }); 28 | 29 | // DataTable 30 | var table = $('#example').DataTable({ 31 | scrollY: '300px', 32 | scrollX: true, 33 | scrollCollapse: true, 34 | paging: false, 35 | fixedColumns: true 36 | }); 37 | 38 | // Filter event handler 39 | $(table.table().container()).on('keyup', 'tfoot input', function () { 40 | table 41 | .column($(this).data('index')) 42 | .search(this.value) 43 | .draw(); 44 | }); 45 | }); 46 | ]]> 47 | 48 | 49 | Individual column filtering 50 | 51 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /examples/initialisation/button.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 35 | 36 | 37 | 38 | 60 | 61 | 62 | Buttons initialisation 63 | 64 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /examples/initialisation/colvis.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 31 | 32 | 33 | 34 | 51 | 52 | 53 | Column visibility integration 54 | 55 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /examples/integration/select-checkbox.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 | 31 | 32 | 33 | 57 | 58 | 59 | Select - checkboxes 60 | 61 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /examples/initialisation/simple.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | 13 | 22 | 23 | 24 | 25 | 34 | 35 | 36 | Basic initialisation 37 | 38 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.rightColumns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.rightColumns 4 | Number of columns to fix to the right of the table 5 | 6 | 7 | As of FixedColumns 4.0.0 this option has been replaced by the `-init fixedColumns.right` option. There is no behaviour change here, but the naming is an improvement. 8 | 9 | For now this option will continue to be supported, however it will be removed in the future. We encourage you to move instead to `-init fixedColumns.right`. 10 | 11 | 12 | 13 | 14 | 15 | The number of columns on the right hand side of the table to fix in place. 16 | 17 | 18 | 19 | 20 | No columns will be fixed to the right hand side of the table. 21 | 22 | 23 | 24 | FixedColumns can fix columns to both the left and right hand sides of the DataTable. By default only a single left hand column is fixed in place, but this parameter provides the option to specify how many columns should be fixed on the right. This is a simple integer that indicates that number of columns. FixedColumns will then use this value to fix that many _visible_ columns to the left side of the table. Columns that are not visible will be ignored. 25 | 26 | This option is deprecated and is replaced by the `-init fixedColumns.right` option. 27 | 28 | 29 | 36 | 37 | 45 | 46 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.leftColumns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns.leftColumns 4 | Number of columns to fix to the left of the table 5 | 6 | 7 | As of FixedColumns 4.0.0 this option has been replaced by the `-init fixedColumns.left` option. There is no behaviour change here, but the naming is an improvement. 8 | 9 | For now this option will continue to be supported, however it will be removed in the future. We encourage you to move instead to `-init fixedColumns.left`. 10 | 11 | 12 | 13 | 14 | 15 | The number of columns on the left hand side of the table to fix in place. 16 | 17 | 18 | 19 | 20 | The first column on the left of the table will be fixed in place. 21 | 22 | 23 | 24 | FixedColumns, by default, will fix only the left most column in place, however it is also possible to fix two or more columns in place as required by your application. The number of columns to fix in place is defined by this parameter, which is simply an integer that indicates how many columns should be fixed. FixedColumns will then use this value to fix that many _visible_ columns to the left side of the table. Columns that are not visible will be ignored. 25 | 26 | This option is deprecated and is replaced by the `-init fixedColumns.left` option. 27 | 28 | 29 | 36 | 37 | 45 | 46 | -------------------------------------------------------------------------------- /examples/integration/api.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ' + cell.data() + ''); 20 | }); 21 | 22 | ]]> 23 | 24 | 25 | 26 | 45 | 46 | 47 | DataTables API 48 | 49 | 58 | 59 | 60 |
Clicked on cell data - new events added at the top
61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /examples/initialisation/index_column.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | /* Ensure that the demo table scrolls */ 6 | th, td { white-space: nowrap; } 7 | div.dataTables_wrapper { 8 | width: 800px; 9 | margin: 0 auto; 10 | } 11 | 12 | /* Styling for the index columns */ 13 | td.dtfc-fixed-start { 14 | background-color: rgb(255, 243, 207) !important; 15 | border-right: 1px solid rgba(0, 0, 0, 0.5); 16 | } 17 | 18 | 19 | 48 | 49 | 50 | 51 | 79 | 80 | 81 | Index column 82 | 83 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # FixedColumns 2 | 3 | When making use of DataTables' horizontal scrolling feature (`scrollX`), you may wish to fix the left or right most columns in place. This extension for DataTables provides exactly this option (for non-scrolling tables, please use the FixedHeader extension, which can fix the header and footer). 4 | 5 | 6 | # Installation 7 | 8 | To use FixedColumns the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/fixedcolumns/) for full details. 9 | 10 | ## NPM and Bower 11 | 12 | If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-fixedcolumns`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name. 13 | 14 | Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables. 15 | 16 | 17 | # Basic usage 18 | 19 | FixedColumns is initialised using the `fixedColumns` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details. DataTables' scrolling options should also be enabled to use this feature. 20 | 21 | Example: 22 | 23 | ```js 24 | $(document).ready(function() { 25 | var table = $('#example').DataTable( { 26 | scrollY: "300px", 27 | scrollX: true, 28 | scrollCollapse: true, 29 | paging: false, 30 | fixedColumns: true 31 | } ); 32 | } ); 33 | ``` 34 | 35 | 36 | # Documentation / support 37 | 38 | * [Documentation](https://datatables.net/extensions/fixedcolumns/) 39 | * [DataTables support forums](http://datatables.net/forums) 40 | 41 | 42 | # GitHub 43 | 44 | If you fancy getting involved with the development of FixedColumns and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/FixedColumns). 45 | -------------------------------------------------------------------------------- /test/api/fixedColumns().left().js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - fixedColumns().left())', function () { 2 | dt.libs({ 3 | js: ['jquery', 'datatables', 'fixedcolumns'], 4 | css: ['datatables', 'fixedcolumns'] 5 | }); 6 | 7 | let table; 8 | 9 | describe('Check the defaults', function () { 10 | dt.html('basic'); 11 | it('Exists and is a function', function () { 12 | table = $('#example').DataTable({ 13 | fixedColumns: true 14 | }); 15 | expect(typeof table.fixedColumns().left).toBe('function'); 16 | }); 17 | it('Getter returns a boolean value', function () { 18 | expect(typeof table.fixedColumns().left()).toBe('number'); 19 | }); 20 | it('Setter returns an API instance', function () { 21 | expect(table.fixedColumns().left(2) instanceof $.fn.dataTable.Api).toBe(true); 22 | }); 23 | }); 24 | 25 | describe('Getter', function () { 26 | dt.html('basic'); 27 | it('Default', function () { 28 | table = $('#example').DataTable({ 29 | fixedColumns: true 30 | }); 31 | 32 | expect(table.fixedColumns().left()).toBe(1); 33 | }); 34 | 35 | dt.html('basic'); 36 | it('Left', function () { 37 | table = $('#example').DataTable({ 38 | fixedColumns: { 39 | left: 4 40 | } 41 | }); 42 | 43 | expect(table.fixedColumns().left()).toBe(4); 44 | }); 45 | 46 | dt.html('basic'); 47 | it('Left and right', function () { 48 | table = $('#example').DataTable({ 49 | fixedColumns: { 50 | left: 2, 51 | right: 3 52 | } 53 | }); 54 | 55 | expect(table.fixedColumns().left()).toBe(2); 56 | }); 57 | }); 58 | 59 | describe('Setter', function () { 60 | dt.html('basic'); 61 | it('Left', function () { 62 | table = $('#example').DataTable({ 63 | fixedColumns: true 64 | }); 65 | 66 | table.fixedColumns().left(2); 67 | 68 | expect(table.fixedColumns().left()).toBe(2); 69 | }); 70 | 71 | dt.html('basic'); 72 | it('Left', function () { 73 | table = $('#example').DataTable({ 74 | fixedColumns: { 75 | left: 4 76 | } 77 | }); 78 | 79 | table.fixedColumns().left(2); 80 | 81 | expect(table.fixedColumns().left()).toBe(2); 82 | }); 83 | 84 | dt.html('basic'); 85 | it('Left and right', function () { 86 | table = $('#example').DataTable({ 87 | fixedColumns: { 88 | left: 2, 89 | right: 3 90 | } 91 | }); 92 | 93 | table.fixedColumns().left(3); 94 | 95 | expect(table.fixedColumns().left()).toBe(3); 96 | }); 97 | }); 98 | }); 99 | -------------------------------------------------------------------------------- /docs/option/fixedColumns.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | fixedColumns 4 | Enable and configure the FixedColumns extension for DataTables 5 | 3.1.0 6 | 7 | 8 | 9 | As a boolean value this property will enable FixedColumns on the DataTable that is being created. `true` will enable FixedColumns, while `false` will not. 10 | 11 | This is a short-cut option to enable FixedColumns with the default configuration options. Customisations can be made by giving this parameter as an object, see below. 12 | 13 | 14 | 15 | 16 | 17 | If given as an object, FixedColumns will be enabled on the target DataTable, with default values (`DataTable.FixedColumns.defaults`) extended, and potentially overwritten, by the options provided in this object. This is how FixedColumns can be configured on an individual table basis, or through the defaults. 18 | 19 | 20 | 21 | 22 | FixedColumns will not be initialised by default 23 | 24 | 25 | 26 | FixedColumns provides the option to freeze one or more columns at the start or end of a horizontally scrolling DataTable. This allows information in the fixed columns to remain visible even when scrolling through the data set. This can be particularly useful if you wish to show a large number of columns. 27 | 28 | This option provides the ability to enable and configure FixedColumns for DataTables. In its simplest form as the boolean `true` it will enable FixedColumns with the default configuration options (as defined by `DataTable.FixedColumns.defaults`). It can also be used as an object to provide custom configuration options as described below. 29 | 30 | Please note that as with all other configuration options for FixedColumns, this option is an extension to the [default set of DataTables options](/reference/option). This property should be set in the DataTables initialisation object. 31 | 32 | 33 | 38 | 39 | 46 | 47 | -------------------------------------------------------------------------------- /test/api/fixedColumns().right().js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - fixedColumns().right())', function () { 2 | dt.libs({ 3 | js: ['jquery', 'datatables', 'fixedcolumns'], 4 | css: ['datatables', 'fixedcolumns'] 5 | }); 6 | 7 | let table; 8 | 9 | describe('Check the defaults', function () { 10 | dt.html('basic'); 11 | it('Exists and is a function', function () { 12 | table = $('#example').DataTable({ 13 | fixedColumns: true 14 | }); 15 | expect(typeof table.fixedColumns().right).toBe('function'); 16 | }); 17 | it('Getter returns a boolean value', function () { 18 | expect(typeof table.fixedColumns().right()).toBe('number'); 19 | }); 20 | it('Setter returns an API instance', function () { 21 | expect(table.fixedColumns().right(2) instanceof $.fn.dataTable.Api).toBe(true); 22 | }); 23 | }); 24 | 25 | describe('Getter', function () { 26 | dt.html('basic'); 27 | it('Default', function () { 28 | table = $('#example').DataTable({ 29 | fixedColumns: true 30 | }); 31 | 32 | expect(table.fixedColumns().right()).toBe(0); 33 | }); 34 | 35 | dt.html('basic'); 36 | it('Right', function () { 37 | table = $('#example').DataTable({ 38 | fixedColumns: { 39 | right: 4 40 | } 41 | }); 42 | 43 | expect(table.fixedColumns().right()).toBe(4); 44 | }); 45 | 46 | dt.html('basic'); 47 | it('Left and right', function () { 48 | table = $('#example').DataTable({ 49 | fixedColumns: { 50 | left: 2, 51 | right: 3 52 | } 53 | }); 54 | 55 | expect(table.fixedColumns().right()).toBe(3); 56 | }); 57 | }); 58 | 59 | describe('Setter', function () { 60 | dt.html('basic'); 61 | it('Right', function () { 62 | table = $('#example').DataTable({ 63 | fixedColumns: true 64 | }); 65 | 66 | table.fixedColumns().right(2); 67 | 68 | expect(table.fixedColumns().right()).toBe(2); 69 | }); 70 | 71 | dt.html('basic'); 72 | it('Right', function () { 73 | table = $('#example').DataTable({ 74 | fixedColumns: { 75 | right: 4 76 | } 77 | }); 78 | 79 | table.fixedColumns().right(2); 80 | 81 | expect(table.fixedColumns().right()).toBe(2); 82 | }); 83 | 84 | dt.html('basic'); 85 | it('Left and right', function () { 86 | table = $('#example').DataTable({ 87 | fixedColumns: { 88 | left: 2, 89 | right: 3 90 | } 91 | }); 92 | 93 | table.fixedColumns().right(3); 94 | 95 | expect(table.fixedColumns().right()).toBe(3); 96 | }); 97 | }); 98 | }); 99 | -------------------------------------------------------------------------------- /css/fixedColumns.dataTables.scss: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --dtfc_background: white; 4 | --dtfc-thead-cell_background: var(--dtfc_background); 5 | --dtfc-tbody-cell_background: var(--dtfc_background); 6 | } 7 | 8 | 9 | :root.dark { 10 | --dtfc_background: rgb(33, 37, 41); 11 | } 12 | 13 | // Make sure the fixed columns aren't transparent 14 | table.dataTable { 15 | thead, 16 | tfoot { 17 | tr > .dtfc-fixed-start, 18 | tr > .dtfc-fixed-end { 19 | top: 0; 20 | bottom: 0; 21 | z-index: 3; 22 | background-color: var(--dtfc-thead-cell_background); 23 | } 24 | } 25 | 26 | tbody { 27 | tr > .dtfc-fixed-start, 28 | tr > .dtfc-fixed-end { 29 | z-index: 1; 30 | background-color: var(--dtfc-tbody-cell_background); 31 | } 32 | } 33 | 34 | tr > .dtfc-fixed-left::after, 35 | tr > .dtfc-fixed-right::after { 36 | position: absolute; 37 | top: 0; 38 | bottom: 0; 39 | width: 10px; 40 | transition: box-shadow 0.3s; 41 | content: ""; 42 | pointer-events: none; 43 | } 44 | 45 | tr > .dtfc-fixed-left::after { 46 | right: 0; 47 | transform: translateX(100%); 48 | } 49 | 50 | tr > .dtfc-fixed-right::after { 51 | left: 0; 52 | transform: translateX(-80%); 53 | } 54 | 55 | &.dtfc-scrolling-left { 56 | tr > .dtfc-fixed-left::after { 57 | box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.2); 58 | } 59 | } 60 | 61 | &.dtfc-scrolling-right { 62 | tr > { 63 | .dtfc-fixed-right::after { 64 | box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.2); 65 | } 66 | 67 | // Blockout the stacking 68 | .dtfc-fixed-right + .dtfc-fixed-right::after { 69 | box-shadow: none; 70 | } 71 | } 72 | } 73 | } 74 | 75 | div.dt-scroll, 76 | div.dtfh-floatingparent { 77 | position: relative; 78 | 79 | div.dtfc-top-blocker, 80 | div.dtfc-bottom-blocker { 81 | position: absolute; 82 | background-color: var(--dtfc-thead-cell_background); 83 | } 84 | } 85 | 86 | html.dark { 87 | table.dataTable { 88 | &.dtfc-scrolling-left { 89 | tbody > tr > .dtfc-fixed-left::after { 90 | box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3); 91 | } 92 | } 93 | 94 | &.dtfc-scrolling-right { 95 | tbody > tr > { 96 | .dtfc-fixed-right::after { 97 | box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3); 98 | } 99 | 100 | // Blockout the stacking 101 | .dtfc-fixed-right + .dtfc-fixed-right::after { 102 | box-shadow: none; 103 | } 104 | } 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /test/option/leftColumns.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - leftColumns', function() { 2 | // TK COLIN need to add test to confirm user interaction 3 | let table; 4 | 5 | dt.libs({ 6 | js: ['jquery', 'datatables', 'fixedcolumns'], 7 | css: ['datatables', 'fixedcolumns'] 8 | }); 9 | 10 | function _checkElements(side, expected) { 11 | expect($('td.dtfc-fixed-' + side).length).toBe(expected * 10); 12 | } 13 | 14 | function checkElements(left, right) { 15 | _checkElements('start', left); 16 | _checkElements('end', right); 17 | } 18 | 19 | describe('Check the defaults', function() { 20 | dt.html('basic'); 21 | it('Single column set by default', function() { 22 | expect($.fn.dataTable.FixedColumns.defaults.left).toBe(undefined); 23 | }); 24 | 25 | it('None specified', function() { 26 | table = $('#example').DataTable({ 27 | scrollX: true, 28 | fixedColumns: true 29 | }); 30 | 31 | checkElements(1, 0); 32 | }); 33 | }); 34 | 35 | // deprecated options 36 | describe('Check the defaults', function() { 37 | dt.html('basic'); 38 | it('Cycle through all columns', function() { 39 | for (let i = 1; i <= 6; i++) { 40 | table = $('#example').DataTable({ 41 | destroy: true, 42 | scrollX: true, 43 | fixedColumns: { 44 | leftColumns: i 45 | } 46 | }); 47 | 48 | checkElements(i, 0); 49 | } 50 | }); 51 | 52 | dt.html('basic'); 53 | it('Ensure sensible when right columns also used', function() { 54 | table = $('#example').DataTable({ 55 | scrollX: true, 56 | fixedColumns: { 57 | leftColumns: 2, 58 | rightColumns: 1 59 | } 60 | }); 61 | 62 | checkElements(2, 1); 63 | }); 64 | }); 65 | 66 | describe('Check the defaults', function() { 67 | dt.html('basic'); 68 | it('Cycle through all columns', function() { 69 | for (let i = 1; i <= 6; i++) { 70 | table = $('#example').DataTable({ 71 | destroy: true, 72 | scrollX: true, 73 | fixedColumns: { 74 | left: i 75 | } 76 | }); 77 | 78 | checkElements(i, 0); 79 | } 80 | }); 81 | 82 | dt.html('basic'); 83 | it('Ensure sensible when right columns also used', function() { 84 | table = $('#example').DataTable({ 85 | scrollX: true, 86 | fixedColumns: { 87 | left: 2, 88 | right: 1 89 | } 90 | }); 91 | 92 | checkElements(2, 1); 93 | }); 94 | }); 95 | 96 | describe('Direction check', function() { 97 | dt.html('basic'); 98 | 99 | it('Left with ltr is left', function() { 100 | table = $('#example').DataTable({ 101 | scrollX: true, 102 | fixedColumns: { 103 | left: 1 104 | } 105 | }); 106 | 107 | let el = $('td.dtfc-fixed-start').eq(0); 108 | 109 | expect(el.css('left')).toBe('0px'); 110 | expect(el.css('right')).toBe('auto'); 111 | }); 112 | 113 | dt.html('basic'); 114 | 115 | it('Left with rtl is also left', function() { 116 | $('html').attr('dir', 'rtl'); 117 | 118 | table = $('#example').DataTable({ 119 | scrollX: true, 120 | fixedColumns: { 121 | left: 1 122 | } 123 | }); 124 | 125 | let el = $('td.dtfc-fixed-end').eq(0); 126 | 127 | expect(el.css('left')).toBe('0px'); 128 | expect(el.css('right')).toBe('auto'); 129 | 130 | $('html').attr('dir', ''); 131 | }); 132 | }); 133 | }); 134 | -------------------------------------------------------------------------------- /test/option/rightColumns.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - rightColumns', function() { 2 | // TK COLIN need to add test to confirm user interaction 3 | let table; 4 | 5 | dt.libs({ 6 | js: ['jquery', 'datatables', 'fixedcolumns'], 7 | css: ['datatables', 'fixedcolumns'] 8 | }); 9 | 10 | function _checkElements(side, expected) { 11 | expect($('td.dtfc-fixed-' + side).length).toBe(expected * 10); 12 | } 13 | 14 | function checkElements(left, right) { 15 | _checkElements('start', left); 16 | _checkElements('end', right); 17 | } 18 | 19 | describe('Check the defaults', function() { 20 | dt.html('basic'); 21 | it('No column set by default', function() { 22 | expect($.fn.dataTable.FixedColumns.defaults.right).toBe(undefined); 23 | }); 24 | 25 | it('None specified', function() { 26 | table = $('#example').DataTable({ 27 | scrollX: true, 28 | fixedColumns: true 29 | }); 30 | 31 | checkElements(1, 0); 32 | }); 33 | }); 34 | 35 | describe('Check the defaults', function() { 36 | dt.html('basic'); 37 | it('Cycle through all columns', function() { 38 | for (let i = 0; i <= 5; i++) { 39 | table = $('#example').DataTable({ 40 | destroy: true, 41 | scrollX: true, 42 | fixedColumns: { 43 | rightColumns: i 44 | } 45 | }); 46 | 47 | checkElements(1, i); 48 | } 49 | }); 50 | 51 | dt.html('basic'); 52 | it('Ensure sensible when left columns disabled', function() { 53 | table = $('#example').DataTable({ 54 | scrollX: true, 55 | fixedColumns: { 56 | leftColumns: 0, 57 | rightColumns: 2 58 | } 59 | }); 60 | 61 | checkElements(0, 2); 62 | }); 63 | }); 64 | 65 | describe('Check the defaults', function() { 66 | dt.html('basic'); 67 | it('Cycle through all columns', function() { 68 | for (let i = 0; i <= 5; i++) { 69 | table = $('#example').DataTable({ 70 | destroy: true, 71 | scrollX: true, 72 | fixedColumns: { 73 | right: i 74 | } 75 | }); 76 | 77 | checkElements(1, i); 78 | } 79 | }); 80 | 81 | dt.html('basic'); 82 | it('Ensure sensible when left columns disabled', function() { 83 | table = $('#example').DataTable({ 84 | scrollX: true, 85 | fixedColumns: { 86 | left: 0, 87 | right: 2 88 | } 89 | }); 90 | 91 | checkElements(0, 2); 92 | }); 93 | }); 94 | 95 | describe('Direction check', function() { 96 | dt.html('basic'); 97 | 98 | it('Right with ltr is right', function() { 99 | table = $('#example').DataTable({ 100 | scrollX: true, 101 | fixedColumns: { 102 | left: 0, 103 | right: 1 104 | } 105 | }); 106 | 107 | let el = $('td.dtfc-fixed-end').eq(0); 108 | 109 | expect(el.css('left')).toBe('auto'); 110 | expect(el.css('right')).toBe('0px'); 111 | }); 112 | 113 | dt.html('basic'); 114 | 115 | it('Right with rtl is also right', function() { 116 | $('html').attr('dir', 'rtl'); 117 | 118 | table = $('#example').DataTable({ 119 | scrollX: true, 120 | fixedColumns: { 121 | left: 0, 122 | right: 1 123 | } 124 | }); 125 | 126 | let el = $('td.dtfc-fixed-start').eq(0); 127 | 128 | expect(el.css('left')).toBe('auto'); 129 | expect(el.css('right')).toBe('0px'); 130 | 131 | $('html').attr('dir', ''); 132 | }); 133 | }); 134 | }); 135 | -------------------------------------------------------------------------------- /test/api/fixedColumns().end().js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - fixedColumns().end())', function () { 2 | dt.libs({ 3 | js: ['jquery', 'datatables', 'fixedcolumns'], 4 | css: ['datatables', 'fixedcolumns'] 5 | }); 6 | 7 | let table; 8 | 9 | describe('Check the defaults', function () { 10 | dt.html('basic'); 11 | it('Exists and is a function', function () { 12 | table = $('#example').DataTable({ 13 | fixedColumns: true 14 | }); 15 | expect(typeof table.fixedColumns().end).toBe('function'); 16 | }); 17 | it('Getter returns a boolean value', function () { 18 | expect(typeof table.fixedColumns().end()).toBe('number'); 19 | }); 20 | it('Setter returns an API instance', function () { 21 | expect(table.fixedColumns().end(2) instanceof $.fn.dataTable.Api).toBe(true); 22 | }); 23 | }); 24 | 25 | describe('Getter', function () { 26 | dt.html('basic'); 27 | it('Default', function () { 28 | table = $('#example').DataTable({ 29 | fixedColumns: true 30 | }); 31 | 32 | expect(table.fixedColumns().end()).toBe(0); 33 | }); 34 | 35 | dt.html('basic'); 36 | it('End', function () { 37 | table = $('#example').DataTable({ 38 | fixedColumns: { 39 | end: 4 40 | } 41 | }); 42 | 43 | expect(table.fixedColumns().end()).toBe(4); 44 | }); 45 | 46 | dt.html('basic'); 47 | it('Start and end', function () { 48 | table = $('#example').DataTable({ 49 | fixedColumns: { 50 | start: 2, 51 | end: 3 52 | } 53 | }); 54 | 55 | expect(table.fixedColumns().end()).toBe(3); 56 | }); 57 | }); 58 | 59 | describe('Setter', function () { 60 | dt.html('basic'); 61 | it('End', function () { 62 | table = $('#example').DataTable({ 63 | fixedColumns: true 64 | }); 65 | 66 | table.fixedColumns().end(2); 67 | 68 | expect(table.fixedColumns().end()).toBe(2); 69 | }); 70 | 71 | dt.html('basic'); 72 | it('End', function () { 73 | table = $('#example').DataTable({ 74 | fixedColumns: { 75 | end: 4 76 | } 77 | }); 78 | 79 | table.fixedColumns().end(2); 80 | 81 | expect(table.fixedColumns().end()).toBe(2); 82 | }); 83 | 84 | dt.html('basic'); 85 | it('Start and end', function () { 86 | table = $('#example').DataTable({ 87 | fixedColumns: { 88 | start: 2, 89 | end: 3 90 | } 91 | }); 92 | 93 | table.fixedColumns().end(3); 94 | 95 | expect(table.fixedColumns().end()).toBe(3); 96 | }); 97 | }); 98 | 99 | describe('Text direction', function() { 100 | dt.html('basic'); 101 | 102 | it('When end is set for rtl - start is 1', function() { 103 | $('html').attr('dir', 'rtl'); 104 | 105 | table = $('#example').DataTable({ 106 | scrollX: true, 107 | fixedColumns: { 108 | start: 0, 109 | end: 1 110 | } 111 | }); 112 | 113 | expect(table.fixedColumns().start()).toBe(0); 114 | expect(table.fixedColumns().left()).toBe(1); 115 | expect(table.fixedColumns().end()).toBe(1); 116 | expect(table.fixedColumns().right()).toBe(0); 117 | 118 | $('html').attr('dir', ''); 119 | }); 120 | 121 | dt.html('basic'); 122 | 123 | it('When right is set for rtl - start is 0', function() { 124 | $('html').attr('dir', 'rtl'); 125 | 126 | table = $('#example').DataTable({ 127 | scrollX: true, 128 | fixedColumns: { 129 | left: 0, 130 | right: 1 131 | } 132 | }); 133 | 134 | expect(table.fixedColumns().start()).toBe(1); 135 | expect(table.fixedColumns().left()).toBe(0); 136 | expect(table.fixedColumns().end()).toBe(0); 137 | expect(table.fixedColumns().right()).toBe(1); 138 | 139 | $('html').attr('dir', ''); 140 | }); 141 | }); 142 | }); 143 | -------------------------------------------------------------------------------- /test/api/fixedColumns().start().js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - fixedColumns().start())', function () { 2 | dt.libs({ 3 | js: ['jquery', 'datatables', 'fixedcolumns'], 4 | css: ['datatables', 'fixedcolumns'] 5 | }); 6 | 7 | let table; 8 | 9 | describe('Check the defaults', function () { 10 | dt.html('basic'); 11 | it('Exists and is a function', function () { 12 | table = $('#example').DataTable({ 13 | fixedColumns: true 14 | }); 15 | expect(typeof table.fixedColumns().start).toBe('function'); 16 | }); 17 | it('Getter returns a boolean value', function () { 18 | expect(typeof table.fixedColumns().start()).toBe('number'); 19 | }); 20 | it('Setter returns an API instance', function () { 21 | expect(table.fixedColumns().start(2) instanceof $.fn.dataTable.Api).toBe(true); 22 | }); 23 | }); 24 | 25 | describe('Getter', function () { 26 | dt.html('basic'); 27 | it('Default', function () { 28 | table = $('#example').DataTable({ 29 | fixedColumns: true 30 | }); 31 | 32 | expect(table.fixedColumns().left()).toBe(1); 33 | }); 34 | 35 | dt.html('basic'); 36 | it('Start', function () { 37 | table = $('#example').DataTable({ 38 | fixedColumns: { 39 | start: 4 40 | } 41 | }); 42 | 43 | expect(table.fixedColumns().start()).toBe(4); 44 | }); 45 | 46 | dt.html('basic'); 47 | it('Start and end', function () { 48 | table = $('#example').DataTable({ 49 | fixedColumns: { 50 | start: 2, 51 | end: 3 52 | } 53 | }); 54 | 55 | expect(table.fixedColumns().start()).toBe(2); 56 | }); 57 | }); 58 | 59 | describe('Setter', function () { 60 | dt.html('basic'); 61 | it('Start', function () { 62 | table = $('#example').DataTable({ 63 | fixedColumns: true 64 | }); 65 | 66 | table.fixedColumns().start(2); 67 | 68 | expect(table.fixedColumns().start()).toBe(2); 69 | }); 70 | 71 | dt.html('basic'); 72 | it('Start', function () { 73 | table = $('#example').DataTable({ 74 | fixedColumns: { 75 | left: 4 76 | } 77 | }); 78 | 79 | table.fixedColumns().start(2); 80 | 81 | expect(table.fixedColumns().start()).toBe(2); 82 | }); 83 | 84 | dt.html('basic'); 85 | it('Start and end', function () { 86 | table = $('#example').DataTable({ 87 | fixedColumns: { 88 | start: 2, 89 | end: 3 90 | } 91 | }); 92 | 93 | table.fixedColumns().start(3); 94 | 95 | expect(table.fixedColumns().start()).toBe(3); 96 | }); 97 | }); 98 | 99 | describe('Text direction', function() { 100 | dt.html('basic'); 101 | 102 | it('When start is set for rtl - start is 1', function() { 103 | $('html').attr('dir', 'rtl'); 104 | 105 | table = $('#example').DataTable({ 106 | scrollX: true, 107 | fixedColumns: { 108 | start: 1, 109 | end: 0 110 | } 111 | }); 112 | 113 | expect(table.fixedColumns().start()).toBe(1); 114 | expect(table.fixedColumns().left()).toBe(0); 115 | expect(table.fixedColumns().end()).toBe(0); 116 | expect(table.fixedColumns().right()).toBe(1); 117 | 118 | $('html').attr('dir', ''); 119 | }); 120 | 121 | dt.html('basic'); 122 | 123 | it('When left is set for rtl - start is 0', function() { 124 | $('html').attr('dir', 'rtl'); 125 | 126 | table = $('#example').DataTable({ 127 | scrollX: true, 128 | fixedColumns: { 129 | left: 1, 130 | right: 0 131 | } 132 | }); 133 | 134 | expect(table.fixedColumns().start()).toBe(0); 135 | expect(table.fixedColumns().left()).toBe(1); 136 | expect(table.fixedColumns().end()).toBe(1); 137 | expect(table.fixedColumns().right()).toBe(0); 138 | 139 | $('html').attr('dir', ''); 140 | }); 141 | }); 142 | }); 143 | -------------------------------------------------------------------------------- /types/types.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for datatables.net-fixedcolumns 2 | // Definitions by: 3 | // SpryMedia 4 | // Konstantin Kuznetsov 5 | 6 | /// 7 | 8 | import DataTables, {Api} from 'datatables.net'; 9 | 10 | export default DataTables; 11 | 12 | declare module 'datatables.net' { 13 | interface Config { 14 | /* 15 | * FixedColumns extension options 16 | */ 17 | fixedColumns?: boolean | FixedColumnsConfig; 18 | } 19 | 20 | interface FixedColumnsConfig { 21 | /** 22 | * The number of columns to fix at the end of the table (ltr and rtl aware) 23 | */ 24 | end?: number; 25 | 26 | i18n?: { 27 | /** Text for `fixedColumns` button */ 28 | button?: string; 29 | }; 30 | 31 | /** 32 | * The number of columns on the left hand side of the table to fix in place. 33 | */ 34 | left?: number; 35 | 36 | /** 37 | * The number of columns on the left hand side of the table to fix in place. 38 | * @deprecated Use `start` 39 | */ 40 | leftColumns?: number; 41 | 42 | /** 43 | * The number of columns on the right hand side of the table to fix in place. 44 | */ 45 | right?: number; 46 | 47 | /** 48 | * The number of columns on the right hand side of the table to fix in place. 49 | * @deprecated Use `end` 50 | */ 51 | rightColumns?: number; 52 | 53 | /** 54 | * The number of columns to fix at the start of the table (ltr and rtl aware) 55 | */ 56 | start?: number; 57 | } 58 | 59 | interface Api { 60 | /** 61 | * Namespacing for FixedColumns methods - FixedColumns' methods are available on the returned API instance. 62 | * 63 | * @returns DataTables API instance with the FixedColumns methods available. 64 | */ 65 | fixedColumns(): FixedColumnsMethods; 66 | } 67 | 68 | interface FixedColumnsMethods extends Api { 69 | /** 70 | * Get the number of columns fixed at the end of the table 71 | * 72 | * @returns Count 73 | */ 74 | end(): number; 75 | 76 | /** 77 | * Set the number of columns fixed at the end of the table 78 | * 79 | * @returns DataTables API instance 80 | */ 81 | end(count: number): Api; 82 | 83 | /** 84 | * Get the number of columns fixed at the left of the table 85 | * 86 | * @returns Count 87 | */ 88 | left(): number; 89 | 90 | /** 91 | * Set the number of columns fixed at the left of the table 92 | * 93 | * @returns DataTables API instance 94 | */ 95 | left(count: number): Api; 96 | 97 | /** 98 | * Get the number of columns fixed at the right of the table 99 | * 100 | * @returns Count 101 | */ 102 | right(): number; 103 | 104 | /** 105 | * Set the number of columns fixed at the right of the table 106 | * 107 | * @returns DataTables API instance 108 | */ 109 | right(count: number): Api; 110 | 111 | /** 112 | * Get the number of columns fixed at the start of the table 113 | * 114 | * @returns Count 115 | */ 116 | start(): number; 117 | 118 | /** 119 | * Set the number of columns fixed at the start of the table 120 | * 121 | * @returns DataTables API instance 122 | */ 123 | start(count: number): Api; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /*! FixedColumns 5.0.5 2 | * © SpryMedia Ltd - datatables.net/license 3 | */ 4 | 5 | /** 6 | * @summary FixedColumns 7 | * @description FixedColumns extension for DataTables 8 | * @version 5.0.5 9 | * @author SpryMedia Ltd (www.sprymedia.co.uk) 10 | * @copyright SpryMedia Ltd. 11 | * 12 | * This source file is free software, available under the following license: 13 | * MIT license - http://datatables.net/license/mit 14 | * 15 | * This source file is distributed in the hope that it will be useful, but 16 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 17 | * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. 18 | * 19 | * For details please refer to: http://www.datatables.net 20 | */ 21 | 22 | /// 2 | 3 | 4 | 5 | div.info button { 6 | margin-bottom: 0.5em; 7 | } 8 | 9 | 10 | Set fixed columns start: ' + fc.start() + '' 27 | ); 28 | }); 29 | 30 | $('#decreaseStart').on('click', function () { 31 | let fc = table.fixedColumns(); 32 | 33 | fc.start(fc.start() - 1); 34 | 35 | $('#click-output').prepend( 36 | '
Set fixed columns start: ' + fc.start() + '
' 37 | ); 38 | }); 39 | 40 | $('#increaseEnd').on('click', function () { 41 | let fc = table.fixedColumns(); 42 | 43 | fc.end(fc.end() + 1); 44 | 45 | $('#click-output').prepend( 46 | '
Set fixed columns end: ' + fc.end() + '
' 47 | ); 48 | }); 49 | 50 | $('#decreaseEnd').on('click', function () { 51 | let fc = table.fixedColumns(); 52 | 53 | fc.end(fc.end() - 1); 54 | 55 | $('#click-output').prepend( 56 | '
Set fixed columns end: ' + fc.end() + '
' 57 | ); 58 | }); 59 | 60 | ]]> 61 | 62 | 63 | 64 | 114 | 115 | 116 | DataTables API 117 | 118 | Increase number of fixed columns at start
128 |
129 |
130 |
131 | 132 | ]]> 133 | 134 | 135 |
Number of FixedColumns - new values added at the top
136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /test/option/fixedColumns.start.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - leftColumns', function() { 2 | // TK COLIN need to add test to confirm user interaction 3 | let table; 4 | 5 | dt.libs({ 6 | js: ['jquery', 'datatables', 'fixedcolumns'], 7 | css: ['datatables', 'fixedcolumns'] 8 | }); 9 | 10 | function _checkElements(side, expected) { 11 | expect($('td.dtfc-fixed-' + side).length).toBe(expected * 10); 12 | } 13 | 14 | function checkElements(start, end, left, right) { 15 | _checkElements('start', start); 16 | _checkElements('end', end); 17 | _checkElements('left', left); 18 | _checkElements('right', right); 19 | } 20 | 21 | describe('Check the defaults', function() { 22 | dt.html('basic_wide'); 23 | it('Single column set by default', function() { 24 | expect($.fn.dataTable.FixedColumns.defaults.start).toBe(1); 25 | }); 26 | 27 | it('None specified', function() { 28 | table = $('#example').DataTable({ 29 | scrollX: true, 30 | fixedColumns: true 31 | }); 32 | 33 | checkElements(1, 0, 1, 0); 34 | }); 35 | }); 36 | 37 | 38 | describe('Check the defaults', function() { 39 | dt.html('basic_wide'); 40 | it('Cycle through all columns', function() { 41 | for (let i = 1; i <= 6; i++) { 42 | table = $('#example').DataTable({ 43 | destroy: true, 44 | scrollX: true, 45 | fixedColumns: { 46 | start: i 47 | } 48 | }); 49 | 50 | checkElements(i, 0, i, 0); 51 | } 52 | }); 53 | 54 | dt.html('basic_wide'); 55 | it('Ensure sensible when end columns also used', function() { 56 | table = $('#example').DataTable({ 57 | scrollX: true, 58 | fixedColumns: { 59 | start: 2, 60 | end: 1 61 | } 62 | }); 63 | 64 | checkElements(2, 1, 2, 1); 65 | }); 66 | }); 67 | 68 | describe('Direction check', function() { 69 | dt.html('basic_wide'); 70 | 71 | it('Start with ltr is left', function() { 72 | table = $('#example').DataTable({ 73 | scrollX: true, 74 | fixedColumns: { 75 | start: 1 76 | } 77 | }); 78 | 79 | let el = $('td.dtfc-fixed-start').eq(0); 80 | 81 | expect(el.css('left')).toBe('0px'); 82 | expect(el.css('right')).toBe('auto'); 83 | 84 | checkElements(1, 0, 1, 0); 85 | }); 86 | 87 | dt.html('basic_wide'); 88 | 89 | it('Start with rtl is right', function() { 90 | $('html').attr('dir', 'rtl'); 91 | 92 | table = $('#example').DataTable({ 93 | scrollX: true, 94 | fixedColumns: { 95 | start: 1 96 | } 97 | }); 98 | 99 | let el = $('td.dtfc-fixed-start').eq(0); 100 | 101 | expect(el.css('left')).toBe('auto'); 102 | expect(el.css('right')).toBe('0px'); 103 | 104 | checkElements(1, 0, 0, 1); 105 | 106 | $('html').attr('dir', ''); 107 | }); 108 | }); 109 | 110 | describe('Table classes', function() { 111 | dt.html('basic_wide'); 112 | 113 | it('Initialisation', function(done) { 114 | table = $('#example').DataTable({ 115 | scrollX: true, 116 | fixedColumns: true 117 | }); 118 | 119 | setTimeout(function () { 120 | expect($('#example').hasClass('dtfc-has-start')).toBe(true); 121 | expect($('#example').hasClass('dtfc-has-end')).toBe(false); 122 | expect($('#example').hasClass('dtfc-has-left')).toBe(true); 123 | expect($('#example').hasClass('dtfc-has-right')).toBe(false); 124 | 125 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(false); 126 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 127 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(false); 128 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 129 | 130 | done(); 131 | }); 132 | }); 133 | 134 | it('Scrolling', function(done) { 135 | $('div.dt-scroll-body').scrollLeft(10); 136 | 137 | setTimeout(function () { 138 | expect($('#example').hasClass('dtfc-has-start')).toBe(true); 139 | expect($('#example').hasClass('dtfc-has-end')).toBe(false); 140 | expect($('#example').hasClass('dtfc-has-left')).toBe(true); 141 | expect($('#example').hasClass('dtfc-has-right')).toBe(false); 142 | 143 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(true); 144 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 145 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 146 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 147 | 148 | done(); 149 | }, 100); 150 | }); 151 | 152 | dt.html('basic_wide'); 153 | 154 | it('RTL - Initialisation', function(done) { 155 | $('html').attr('dir', 'rtl'); 156 | 157 | table = $('#example').DataTable({ 158 | scrollX: true, 159 | fixedColumns: true 160 | }); 161 | 162 | setTimeout(function () { 163 | expect($('#example').hasClass('dtfc-has-start')).toBe(true); 164 | expect($('#example').hasClass('dtfc-has-end')).toBe(false); 165 | expect($('#example').hasClass('dtfc-has-left')).toBe(false); 166 | expect($('#example').hasClass('dtfc-has-right')).toBe(true); 167 | 168 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(false); 169 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 170 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 171 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(false); 172 | 173 | done(); 174 | }); 175 | }); 176 | 177 | it('RTL - Scrolling', function(done) { 178 | $('div.dt-scroll-body').scrollLeft(-10); 179 | 180 | setTimeout(function () { 181 | expect($('#example').hasClass('dtfc-has-start')).toBe(true); 182 | expect($('#example').hasClass('dtfc-has-end')).toBe(false); 183 | expect($('#example').hasClass('dtfc-has-left')).toBe(false); 184 | expect($('#example').hasClass('dtfc-has-right')).toBe(true); 185 | 186 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(true); 187 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 188 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 189 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 190 | 191 | done(); 192 | 193 | $('html').attr('dir', ''); 194 | }, 100); 195 | }); 196 | }); 197 | }); 198 | -------------------------------------------------------------------------------- /test/option/fixedColumns.end.js: -------------------------------------------------------------------------------- 1 | describe('fixedColumns - rightColumns', function() { 2 | // TK COLIN need to add test to confirm user interaction 3 | let table; 4 | 5 | dt.libs({ 6 | js: ['jquery', 'datatables', 'fixedcolumns'], 7 | css: ['datatables', 'fixedcolumns'] 8 | }); 9 | 10 | function _checkElements(side, expected) { 11 | expect($('td.dtfc-fixed-' + side).length).toBe(expected * 10); 12 | } 13 | 14 | function checkElements(start, end, left, right) { 15 | _checkElements('start', start); 16 | _checkElements('end', end); 17 | _checkElements('left', left); 18 | _checkElements('right', right); 19 | } 20 | 21 | describe('Check the defaults', function() { 22 | dt.html('basic'); 23 | it('No column set by default', function() { 24 | expect($.fn.dataTable.FixedColumns.defaults.end).toBe(0); 25 | }); 26 | 27 | it('None specified', function() { 28 | table = $('#example').DataTable({ 29 | scrollX: true, 30 | fixedColumns: true 31 | }); 32 | 33 | checkElements(1, 0, 1, 0); 34 | }); 35 | }); 36 | 37 | describe('Check the defaults', function() { 38 | dt.html('basic'); 39 | it('Cycle through all columns', function() { 40 | for (let i = 0; i <= 5; i++) { 41 | table = $('#example').DataTable({ 42 | destroy: true, 43 | scrollX: true, 44 | fixedColumns: { 45 | end: i 46 | } 47 | }); 48 | 49 | checkElements(1, i, 1, i); 50 | } 51 | }); 52 | 53 | dt.html('basic'); 54 | it('Ensure sensible when start columns disabled', function() { 55 | table = $('#example').DataTable({ 56 | scrollX: true, 57 | fixedColumns: { 58 | start: 0, 59 | end: 2 60 | } 61 | }); 62 | 63 | checkElements(0, 2, 0, 2); 64 | }); 65 | }); 66 | 67 | describe('Direction check', function() { 68 | dt.html('basic'); 69 | 70 | it('Start with ltr is right', function() { 71 | table = $('#example').DataTable({ 72 | scrollX: true, 73 | fixedColumns: { 74 | start: 0, 75 | end: 1 76 | } 77 | }); 78 | 79 | let el = $('td.dtfc-fixed-end').eq(0); 80 | 81 | expect(el.css('left')).toBe('auto'); 82 | expect(el.css('right')).toBe('0px'); 83 | 84 | checkElements(0, 1, 0, 1); 85 | }); 86 | 87 | dt.html('basic'); 88 | 89 | it('Start with rtl is left', function() { 90 | $('html').attr('dir', 'rtl'); 91 | 92 | table = $('#example').DataTable({ 93 | scrollX: true, 94 | fixedColumns: { 95 | start: 0, 96 | end: 1 97 | } 98 | }); 99 | 100 | let el = $('td.dtfc-fixed-end').eq(0); 101 | 102 | expect(el.css('left')).toBe('0px'); 103 | expect(el.css('right')).toBe('auto'); 104 | 105 | checkElements(0, 1, 1, 0); 106 | 107 | $('html').attr('dir', ''); 108 | }); 109 | }); 110 | 111 | describe('Table classes', function() { 112 | dt.html('basic_wide'); 113 | 114 | it('Initialisation', function(done) { 115 | table = $('#example').DataTable({ 116 | scrollX: true, 117 | fixedColumns: { 118 | start: 0, 119 | end: 1 120 | } 121 | }); 122 | 123 | setTimeout(function () { 124 | expect($('#example').hasClass('dtfc-has-start')).toBe(false); 125 | expect($('#example').hasClass('dtfc-has-end')).toBe(true); 126 | expect($('#example').hasClass('dtfc-has-left')).toBe(false); 127 | expect($('#example').hasClass('dtfc-has-right')).toBe(true); 128 | 129 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(false); 130 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 131 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(false); 132 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 133 | 134 | done(); 135 | }); 136 | }); 137 | 138 | it('Scrolling', function(done) { 139 | $('div.dt-scroll-body').scrollLeft(10); 140 | 141 | setTimeout(function () { 142 | expect($('#example').hasClass('dtfc-has-start')).toBe(false); 143 | expect($('#example').hasClass('dtfc-has-end')).toBe(true); 144 | expect($('#example').hasClass('dtfc-has-left')).toBe(false); 145 | expect($('#example').hasClass('dtfc-has-right')).toBe(true); 146 | 147 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(true); 148 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 149 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 150 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 151 | 152 | done(); 153 | }, 100); 154 | }); 155 | 156 | dt.html('basic_wide'); 157 | 158 | it('RTL - Initialisation', function(done) { 159 | $('html').attr('dir', 'rtl'); 160 | 161 | table = $('#example').DataTable({ 162 | scrollX: true, 163 | fixedColumns: { 164 | start: 0, 165 | end: 1 166 | } 167 | }); 168 | 169 | setTimeout(function () { 170 | expect($('#example').hasClass('dtfc-has-start')).toBe(false); 171 | expect($('#example').hasClass('dtfc-has-end')).toBe(true); 172 | expect($('#example').hasClass('dtfc-has-left')).toBe(true); 173 | expect($('#example').hasClass('dtfc-has-right')).toBe(false); 174 | 175 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(false); 176 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 177 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 178 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(false); 179 | 180 | done(); 181 | }); 182 | }); 183 | 184 | it('RTL - Scrolling', function(done) { 185 | $('div.dt-scroll-body').scrollLeft(-10); 186 | 187 | setTimeout(function () { 188 | expect($('#example').hasClass('dtfc-has-start')).toBe(false); 189 | expect($('#example').hasClass('dtfc-has-end')).toBe(true); 190 | expect($('#example').hasClass('dtfc-has-left')).toBe(true); 191 | expect($('#example').hasClass('dtfc-has-right')).toBe(false); 192 | 193 | expect($('#example').hasClass('dtfc-scrolling-start')).toBe(true); 194 | expect($('#example').hasClass('dtfc-scrolling-end')).toBe(true); 195 | expect($('#example').hasClass('dtfc-scrolling-left')).toBe(true); 196 | expect($('#example').hasClass('dtfc-scrolling-right')).toBe(true); 197 | 198 | done(); 199 | 200 | $('html').attr('dir', ''); 201 | }, 100); 202 | }); 203 | }); 204 | }); 205 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/recommended', 10 | ], 11 | parser: '@typescript-eslint/parser', 12 | plugins: [ 13 | 'eslint-plugin-jsdoc', 14 | 'eslint-plugin-import', 15 | 'typescript-sort-keys', 16 | '@typescript-eslint', 17 | ], 18 | root: true, 19 | rules: { 20 | '@typescript-eslint/array-type': [ 21 | 'error', 22 | {default: 'array-simple'} 23 | ], 24 | '@typescript-eslint/ban-types': [ 25 | 'error', 26 | { 27 | types: { 28 | Object: { 29 | message: 'Avoid using the `Object` type. Did you mean `object`?' 30 | }, 31 | Function: { 32 | message: 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.' 33 | }, 34 | Boolean: { 35 | message: 'Avoid using the `Boolean` type. Did you mean `boolean`?' 36 | }, 37 | Number: { 38 | message: 'Avoid using the `Number` type. Did you mean `number`?' 39 | }, 40 | String: { 41 | message: 'Avoid using the `String` type. Did you mean `string`?' 42 | }, 43 | Symbol: { 44 | message: 'Avoid using the `Symbol` type. Did you mean `symbol`?' 45 | } 46 | } 47 | } 48 | ], 49 | '@typescript-eslint/consistent-type-assertions': 'error', 50 | '@typescript-eslint/consistent-type-definitions': 'error', 51 | '@typescript-eslint/explicit-member-accessibility': [ 52 | 'error', 53 | { 54 | accessibility: 'explicit' 55 | } 56 | ], 57 | '@typescript-eslint/explicit-module-boundary-types': 'off', 58 | '@typescript-eslint/indent': [ 59 | 'error', 60 | 'tab', 61 | { 62 | ObjectExpression: 'first', 63 | FunctionDeclaration: { 64 | parameters: 'first' 65 | }, 66 | FunctionExpression: { 67 | parameters: 'first' 68 | } 69 | } 70 | ], 71 | '@typescript-eslint/member-delimiter-style': [ 72 | 'error', 73 | { 74 | multiline: { 75 | delimiter: 'semi', 76 | requireLast: true 77 | }, 78 | singleline: { 79 | delimiter: 'semi', 80 | requireLast: false 81 | } 82 | } 83 | ], 84 | '@typescript-eslint/member-ordering': 'error', 85 | '@typescript-eslint/naming-convention': 'error', 86 | '@typescript-eslint/no-empty-function': 'error', 87 | '@typescript-eslint/no-empty-interface': 'off', 88 | '@typescript-eslint/no-explicit-any': 'off', 89 | '@typescript-eslint/no-misused-new': 'error', 90 | '@typescript-eslint/no-namespace': 'off', 91 | '@typescript-eslint/no-non-null-assertion': 'off', 92 | '@typescript-eslint/no-parameter-properties': 'off', 93 | '@typescript-eslint/no-this-alias': 'off', 94 | '@typescript-eslint/no-unused-expressions': 'error', 95 | '@typescript-eslint/no-unused-vars': 'error', 96 | '@typescript-eslint/no-use-before-define': 'off', 97 | '@typescript-eslint/no-var-requires': 'error', 98 | '@typescript-eslint/prefer-for-of': 'error', 99 | '@typescript-eslint/prefer-function-type': 'error', 100 | '@typescript-eslint/prefer-namespace-keyword': 'error', 101 | '@typescript-eslint/quotes': [ 102 | 'error', 103 | 'single' 104 | ], 105 | '@typescript-eslint/semi': [ 106 | 'error', 107 | 'always' 108 | ], 109 | '@typescript-eslint/triple-slash-reference': [ 110 | 'error', 111 | { 112 | lib: 'always', 113 | path: 'always', 114 | types: 'prefer-import' 115 | } 116 | ], 117 | '@typescript-eslint/type-annotation-spacing': 'error', 118 | '@typescript-eslint/unified-signatures': 'error', 119 | 'array-bracket-spacing': 'warn', 120 | 'arrow-body-style': 'error', 121 | 'arrow-parens': [ 122 | 'off', 123 | 'always' 124 | ], 125 | 'block-scoped-var': 'error', 126 | 'brace-style': [ 127 | 'error', 128 | 'stroustrup' 129 | ], 130 | 'class-methods-use-this': 'off', 131 | 'comma-dangle': 'off', 132 | 'complexity': 'off', 133 | 'constructor-super': 'error', 134 | 'curly': [ 135 | 'error', 136 | 'multi-line' 137 | ], 138 | 'eol-last': 'error', 139 | 'eqeqeq': [ 140 | 'error', 141 | 'smart' 142 | ], 143 | 'guard-for-in': 'off', 144 | 'id-blacklist': [ 145 | 'error', 146 | 'any', 147 | 'Number', 148 | 'number', 149 | 'String', 150 | 'string', 151 | 'Boolean', 152 | 'boolean', 153 | 'Undefined', 154 | 'undefined' 155 | ], 156 | 'id-match': 'error', 157 | 'import/no-extraneous-dependencies': 'off', 158 | 'import/no-internal-modules': 'off', 159 | 'import/order': 'error', 160 | 'indent': ['error', 'tab'], 161 | 'jsdoc/check-alignment': 'error', 162 | 'jsdoc/check-indentation': 'error', 163 | 'jsdoc/newline-after-description': 'error', 164 | 'max-classes-per-file': [ 165 | 'error', 166 | 1 167 | ], 168 | 'max-len': [ 169 | 'error', 170 | { 171 | code: 120 172 | } 173 | ], 174 | 'new-parens': 'error', 175 | 'newline-per-chained-call': 'off', 176 | 'no-bitwise': 'error', 177 | 'no-caller': 'error', 178 | 'no-cond-assign': 'error', 179 | 'no-console': 'warn', 180 | 'no-debugger': 'error', 181 | 'no-dupe-else-if': 'error', 182 | 'no-dupe-keys': 'error', 183 | 'no-duplicate-case': 'error', 184 | 'no-duplicate-imports': 'error', 185 | 'no-empty': 'error', 186 | 'no-eval': 'error', 187 | 'no-extra-bind': 'error', 188 | 'no-extra-parens': 'warn', 189 | 'no-extra-semi': 'error', 190 | 'no-fallthrough': 'off', 191 | 'no-invalid-this': 'off', 192 | 'no-invalid-regexp': 'error', 193 | 'no-irregular-whitespace': 'warn', 194 | 'no-lone-blocks': 'error', 195 | 'no-lonely-if': 'warn', 196 | 'no-magic-numbers': 'off', 197 | 'no-multi-spaces': 'warn', 198 | 'no-multiple-empty-lines': 'warn', 199 | 'no-new-func': 'error', 200 | 'no-new-wrappers': 'error', 201 | 'no-redeclare': 'error', 202 | 'no-return-await': 'error', 203 | 'no-sequences': 'error', 204 | 'no-shadow': [ 205 | 'error', 206 | { 207 | hoist: 'all' 208 | } 209 | ], 210 | 'no-sparse-arrays': 'error', 211 | 'no-template-curly-in-string': 'error', 212 | 'no-throw-literal': 'error', 213 | 'no-trailing-spaces': 'warn', 214 | 'no-undef-init': 'error', 215 | 'no-underscore-dangle': 'off', 216 | 'no-unreachable': 'warn', 217 | 'no-unsafe-finally': 'error', 218 | 'no-unused-labels': 'error', 219 | 'no-var': 'error', 220 | 'object-shorthand': 'error', 221 | 'one-var': [ 222 | 'error', 223 | 'never' 224 | ], 225 | 'prefer-arrow/prefer-arrow-functions': 'off', 226 | 'prefer-const': 'off', 227 | 'prefer-object-spread': 'error', 228 | 'quote-props': [ 229 | 'error', 230 | 'consistent-as-needed' 231 | ], 232 | 'radix': 'error', 233 | 'sort-keys': 'error', 234 | 'space-before-blocks': 'warn', 235 | 'space-before-function-paren': [ 236 | 'error', 237 | { 238 | anonymous: 'never', 239 | asyncArrow: 'always', 240 | named: 'never' 241 | } 242 | ], 243 | 'space-in-parens': [ 244 | 'error', 245 | 'never' 246 | ], 247 | 'spaced-comment': [ 248 | 'error', 249 | 'always', 250 | { 251 | markers: [ 252 | '/', '!' 253 | ] 254 | } 255 | ], 256 | 'typescript-sort-keys/interface': 'error', 257 | 'typescript-sort-keys/string-enum': 'error', 258 | 'use-isnan': 'error', 259 | 'valid-typeof': 'off', 260 | }, 261 | }; -------------------------------------------------------------------------------- /src/FixedColumns.ts: -------------------------------------------------------------------------------- 1 | let $; 2 | let DataTable; 3 | 4 | export function setJQuery(jq) { 5 | $ = jq; 6 | DataTable = $.fn.dataTable; 7 | } 8 | 9 | export interface IDefaults { 10 | i18n: { 11 | button: string; 12 | }; 13 | end: number; 14 | left?: number; 15 | leftColumns?: number; 16 | right?: number; 17 | rightColumns?: number; 18 | start: number; 19 | } 20 | 21 | export interface IS { 22 | dt: any; 23 | rtl: boolean; 24 | } 25 | 26 | export interface IClasses { 27 | bottomBlocker: string; 28 | fixedEnd: string; 29 | fixedLeft: string; 30 | fixedRight: string; 31 | fixedStart: string; 32 | tableFixedEnd: string; 33 | tableFixedLeft: string; 34 | tableFixedStart: string; 35 | tableFixedRight: string; 36 | topBlocker: string; 37 | tableScrollingEnd: string; 38 | tableScrollingLeft: string; 39 | tableScrollingRight: string; 40 | tableScrollingStart: string; 41 | } 42 | 43 | export interface IDOM { 44 | bottomBlocker: JQuery; 45 | topBlocker: JQuery; 46 | scroller: JQuery; 47 | } 48 | 49 | export default class FixedColumns { 50 | private static version = '5.0.5'; 51 | 52 | private static classes: IClasses = { 53 | bottomBlocker: 'dtfc-bottom-blocker', 54 | fixedEnd: 'dtfc-fixed-end', 55 | fixedLeft: 'dtfc-fixed-left', 56 | fixedRight: 'dtfc-fixed-right', 57 | fixedStart: 'dtfc-fixed-start', 58 | tableFixedEnd: 'dtfc-has-end', 59 | tableFixedLeft: 'dtfc-has-left', 60 | tableFixedRight: 'dtfc-has-right', 61 | tableFixedStart: 'dtfc-has-start', 62 | tableScrollingEnd: 'dtfc-scrolling-end', 63 | tableScrollingLeft: 'dtfc-scrolling-left', 64 | tableScrollingRight: 'dtfc-scrolling-right', 65 | tableScrollingStart: 'dtfc-scrolling-start', 66 | topBlocker: 'dtfc-top-blocker' 67 | }; 68 | 69 | private static defaults: IDefaults = { 70 | i18n: { 71 | button: 'FixedColumns' 72 | }, 73 | start: 1, 74 | end: 0 75 | }; 76 | 77 | public classes: IClasses; 78 | public c: IDefaults; 79 | public dom: IDOM; 80 | public s: IS; 81 | 82 | public constructor(settings: any, opts: IDefaults) { 83 | // Check that the required version of DataTables is included 84 | if ( 85 | !DataTable || 86 | !DataTable.versionCheck || 87 | !DataTable.versionCheck('2') 88 | ) { 89 | throw new Error('FixedColumns requires DataTables 2 or newer'); 90 | } 91 | 92 | let table = new DataTable.Api(settings); 93 | 94 | this.classes = $.extend(true, {}, FixedColumns.classes); 95 | 96 | // Get options from user 97 | this.c = $.extend(true, {}, FixedColumns.defaults, opts); 98 | 99 | this.s = { 100 | dt: table, 101 | rtl: $(table.table().node()).css('direction') === 'rtl' 102 | }; 103 | 104 | // Backwards compatibility for deprecated options 105 | if (opts && opts.leftColumns !== undefined) { 106 | opts.left = opts.leftColumns; 107 | } 108 | if (opts && opts.left !== undefined) { 109 | this.c[this.s.rtl ? 'end' : 'start'] = opts.left; 110 | } 111 | 112 | if (opts && opts.rightColumns !== undefined) { 113 | opts.right = opts.rightColumns; 114 | } 115 | if (opts && opts.right !== undefined) { 116 | this.c[this.s.rtl ? 'start' : 'end'] = opts.right; 117 | } 118 | 119 | this.dom = { 120 | bottomBlocker: $('
').addClass(this.classes.bottomBlocker), 121 | topBlocker: $('
').addClass(this.classes.topBlocker), 122 | scroller: $('div.dt-scroll-body', this.s.dt.table().container()), 123 | }; 124 | 125 | if (this.s.dt.settings()[0]._bInitComplete) { 126 | // Fixed Columns Initialisation 127 | this._addStyles(); 128 | this._setKeyTableListener(); 129 | } 130 | else { 131 | table.one('init.dt.dtfc', () => { 132 | // Fixed Columns Initialisation 133 | this._addStyles(); 134 | this._setKeyTableListener(); 135 | }); 136 | } 137 | 138 | // Lots or reasons to redraw the column styles 139 | table.on( 140 | 'column-sizing.dt.dtfc column-reorder.dt.dtfc draw.dt.dtfc', 141 | () => this._addStyles() 142 | ); 143 | 144 | // Column visibility can trigger a number of times quickly, so we debounce it 145 | let debounced = DataTable.util.debounce(() => { 146 | this._addStyles() 147 | }, 50); 148 | 149 | table.on('column-visibility.dt.dtfc', () => { 150 | debounced(); 151 | }); 152 | 153 | // Add classes to indicate scrolling state for styling 154 | this.dom.scroller.on('scroll.dtfc', () => this._scroll()); 155 | this._scroll(); 156 | 157 | // Make class available through dt object 158 | table.settings()[0]._fixedColumns = this; 159 | 160 | table.on('destroy', () => this._destroy()); 161 | 162 | return this; 163 | } 164 | 165 | /** 166 | * Getter for the `fixedColumns.end` property 167 | * 168 | * @param newVal Optional. If present this will be the new value for the number of end fixed columns 169 | * @returns The number of end fixed columns 170 | */ 171 | public end(): number; 172 | /** 173 | * Setter for the `fixedColumns.right` property 174 | * 175 | * @param newVal The new value for the number of right fixed columns 176 | * @returns DataTables API for chaining 177 | */ 178 | public end(newVal: number): any; 179 | public end(newVal?: number): any { 180 | // If the value is to change 181 | if (newVal !== undefined) { 182 | if (newVal >= 0 && newVal <= this.s.dt.columns().count()) { 183 | // Set the new values and redraw the columns 184 | this.c.end = newVal; 185 | this._addStyles(); 186 | } 187 | 188 | return this; 189 | } 190 | 191 | return this.c.end; 192 | } 193 | 194 | /** 195 | * Left fix - accounting for RTL 196 | * 197 | * @param count Columns to fix, or undefined for getter 198 | */ 199 | public left(count?) { 200 | return this.s.rtl 201 | ? this.end(count) 202 | : this.start(count); 203 | } 204 | 205 | /** 206 | * Right fix - accounting for RTL 207 | * 208 | * @param count Columns to fix, or undefined for getter 209 | */ 210 | public right(count?) { 211 | return this.s.rtl 212 | ? this.start(count) 213 | : this.end(count); 214 | } 215 | 216 | /** 217 | * Getter for the `fixedColumns.start` property 218 | * 219 | * @param newVal Optional. If present this will be the new value for the number of start fixed columns 220 | * @returns The number of start fixed columns 221 | */ 222 | public start(): number; 223 | /** 224 | * Setter for the `fixedColumns.start` property 225 | * 226 | * @param newVal The new value for the number of left fixed columns 227 | * @returns DataTables API for chaining 228 | */ 229 | public start(newVal: number): any; 230 | public start(newVal?: number): any { 231 | // If the value is to change 232 | if (newVal !== undefined) { 233 | if (newVal >= 0 && newVal <= this.s.dt.columns().count()) { 234 | // Set the new values and redraw the columns 235 | this.c.start = newVal; 236 | this._addStyles(); 237 | } 238 | 239 | return this; 240 | } 241 | 242 | return this.c.start; 243 | } 244 | 245 | /** 246 | * Iterates over the columns, fixing the appropriate ones to the left and right 247 | */ 248 | private _addStyles() { 249 | let dt = this.s.dt; 250 | let that = this; 251 | let colCount = this.s.dt.columns(':visible').count(); 252 | let headerStruct = dt.table().header.structure(':visible'); 253 | let footerStruct = dt.table().footer.structure(':visible'); 254 | let widths = dt.columns(':visible').widths().toArray(); 255 | let wrapper = $(dt.table().node()).closest('div.dt-scroll'); 256 | let scroller = $(dt.table().node()).closest('div.dt-scroll-body')[0]; 257 | let rtl = this.s.rtl; 258 | let start = this.c.start; 259 | let end = this.c.end; 260 | let left = rtl ? end : start; 261 | let right = rtl ? start : end; 262 | let barWidth = dt.settings()[0].oBrowser.barWidth; // dt internal 263 | 264 | // Do nothing if no scrolling in the DataTable 265 | if (wrapper.length === 0) { 266 | return this; 267 | } 268 | 269 | // Bar not needed - no vertical scrolling 270 | if (scroller.offsetWidth === scroller.clientWidth) { 271 | barWidth = 0; 272 | } 273 | 274 | // Loop over the visible columns, setting their state 275 | dt.columns().every(function (colIdx) { 276 | let visIdx = dt.column.index('toVisible', colIdx); 277 | let offset; 278 | 279 | // Skip the hidden columns 280 | if (visIdx === null) { 281 | return; 282 | } 283 | 284 | if (visIdx < start) { 285 | // Fix to the start 286 | offset = that._sum(widths, visIdx); 287 | 288 | that._fixColumn( 289 | visIdx, 290 | offset, 291 | 'start', 292 | headerStruct, 293 | footerStruct, 294 | barWidth 295 | ); 296 | } 297 | else if (visIdx >= colCount - end) { 298 | // Fix to the end 299 | offset = that._sum( 300 | widths, 301 | colCount - visIdx - 1, 302 | true 303 | ); 304 | 305 | that._fixColumn( 306 | visIdx, 307 | offset, 308 | 'end', 309 | headerStruct, 310 | footerStruct, 311 | barWidth 312 | ); 313 | } 314 | else { 315 | // Release 316 | that._fixColumn(visIdx, 0, 'none', headerStruct, footerStruct, barWidth); 317 | } 318 | }); 319 | 320 | // Apply classes to table to indicate what state we are in 321 | $(dt.table().node()) 322 | .toggleClass(that.classes.tableFixedStart, start > 0) 323 | .toggleClass(that.classes.tableFixedEnd, end > 0) 324 | .toggleClass(that.classes.tableFixedLeft, left > 0) 325 | .toggleClass(that.classes.tableFixedRight, right > 0); 326 | 327 | // Blocker elements for when scroll bars are always visible 328 | let headerEl = dt.table().header(); 329 | let footerEl = dt.table().footer(); 330 | let headerHeight = $(headerEl).outerHeight(); 331 | let footerHeight = $(footerEl).outerHeight(); 332 | 333 | this.dom.topBlocker 334 | .appendTo(wrapper) 335 | .css('top', 0) 336 | .css(this.s.rtl ? 'left' : 'right', 0) 337 | .css('height', headerHeight) 338 | .css('width', barWidth + 1) 339 | .css('display', barWidth ? 'block' : 'none'); 340 | 341 | if (footerEl) { 342 | this.dom.bottomBlocker 343 | .appendTo(wrapper) 344 | .css('bottom', 0) 345 | .css(this.s.rtl ? 'left' : 'right', 0) 346 | .css('height', footerHeight) 347 | .css('width', barWidth + 1) 348 | .css('display', barWidth ? 'block' : 'none'); 349 | } 350 | } 351 | 352 | /** 353 | * Clean up 354 | */ 355 | private _destroy() { 356 | this.s.dt.off('.dtfc'); 357 | this.dom.scroller.off('.dtfc'); 358 | 359 | $(this.s.dt.table().node()) 360 | .removeClass( 361 | this.classes.tableScrollingEnd + ' ' + 362 | this.classes.tableScrollingLeft + ' ' + 363 | this.classes.tableScrollingStart + ' ' + 364 | this.classes.tableScrollingRight 365 | ); 366 | 367 | this.dom.bottomBlocker.remove(); 368 | this.dom.topBlocker.remove(); 369 | } 370 | 371 | /** 372 | * Fix or unfix a column 373 | * 374 | * @param idx Column visible index to operate on 375 | * @param offset Offset from the start (pixels) 376 | * @param side start, end or none to unfix a column 377 | * @param header DT header structure object 378 | * @param footer DT footer structure object 379 | */ 380 | private _fixColumn( 381 | idx: number, 382 | offset: number, 383 | side: 'start' | 'end' | 'none', 384 | header, 385 | footer, 386 | barWidth 387 | ) { 388 | let dt = this.s.dt; 389 | let applyStyles = (jq, part) => { 390 | if (side === 'none') { 391 | jq.css('position', '') 392 | .css('left', '') 393 | .css('right', '') 394 | .removeClass( 395 | this.classes.fixedEnd + ' ' + 396 | this.classes.fixedLeft + ' ' + 397 | this.classes.fixedRight + ' ' + 398 | this.classes.fixedStart 399 | ); 400 | } 401 | else { 402 | let positionSide = side === 'start' ? 'left' : 'right'; 403 | 404 | if (this.s.rtl) { 405 | positionSide = side === 'start' ? 'right' : 'left'; 406 | } 407 | 408 | var off = offset; 409 | 410 | if (side === 'end' && (part === 'header' || part === 'footer')) { 411 | off += barWidth; 412 | } 413 | 414 | jq.css('position', 'sticky') 415 | .css(positionSide, off) 416 | .addClass( 417 | side === 'start' 418 | ? this.classes.fixedStart 419 | : this.classes.fixedEnd 420 | ) 421 | .addClass( 422 | positionSide === 'left' 423 | ? this.classes.fixedLeft 424 | : this.classes.fixedRight 425 | ); 426 | } 427 | }; 428 | 429 | header.forEach((row) => { 430 | if (row[idx]) { 431 | applyStyles($(row[idx].cell), 'header'); 432 | } 433 | }); 434 | 435 | applyStyles(dt.column(idx + ':visible', { page: 'current' }).nodes().to$(), 'body'); 436 | 437 | if (footer) { 438 | footer.forEach((row) => { 439 | if (row[idx]) { 440 | applyStyles($(row[idx].cell), 'footer'); 441 | } 442 | }); 443 | } 444 | } 445 | 446 | /** 447 | * Update classes on the table to indicate if the table is scrolling or not 448 | */ 449 | private _scroll() { 450 | let scroller = this.dom.scroller[0]; 451 | 452 | // Not a scrolling table 453 | if (! scroller) { 454 | return; 455 | } 456 | 457 | // Need to update the classes on potentially multiple table tags. There is the 458 | // main one, the scrolling ones and if FixedHeader is active, the holding 459 | // position ones! jQuery will deduplicate for us. 460 | let table = $(this.s.dt.table().node()) 461 | .add(this.s.dt.table().header().parentNode) 462 | .add(this.s.dt.table().footer().parentNode) 463 | .add('div.dt-scroll-headInner table', this.s.dt.table().container()) 464 | .add('div.dt-scroll-footInner table', this.s.dt.table().container()); 465 | 466 | let scrollLeft = scroller.scrollLeft; // 0 when fully scrolled left 467 | let ltr = ! this.s.rtl; 468 | let scrollStart = scrollLeft !== 0; 469 | let scrollEnd = scroller.scrollWidth > (scroller.clientWidth + Math.abs(scrollLeft) + 1); // extra 1 for Chrome 470 | 471 | table.toggleClass(this.classes.tableScrollingStart, scrollStart); 472 | table.toggleClass(this.classes.tableScrollingEnd, scrollEnd); 473 | table.toggleClass(this.classes.tableScrollingLeft, (scrollStart && ltr) || (scrollEnd && ! ltr)); 474 | table.toggleClass(this.classes.tableScrollingRight, (scrollEnd && ltr) || (scrollStart && ! ltr)); 475 | } 476 | 477 | private _setKeyTableListener() { 478 | this.s.dt.on('key-focus.dt.dtfc', (e, dt, cell) => { 479 | let currScroll; 480 | let cellPos = $(cell.node()).offset(); 481 | let scroller = this.dom.scroller[0]; 482 | let scroll = $( 483 | $(this.s.dt.table().node()).closest('div.dt-scroll-body') 484 | ); 485 | 486 | // If there are fixed columns to the left 487 | if (this.c.start > 0) { 488 | // Get the rightmost left fixed column header, it's position and it's width 489 | let rightMost = $(this.s.dt.column(this.c.start - 1).header()); 490 | let rightMostPos = rightMost.offset(); 491 | let rightMostWidth = rightMost.outerWidth(); 492 | 493 | // If the current highlighted cell is left of the rightmost cell on the screen 494 | if ($(cell.node()).hasClass(this.classes.fixedLeft)) { 495 | // Fixed columns have the scrollbar at the start, always 496 | scroll.scrollLeft(0); 497 | } 498 | else if (cellPos.left < rightMostPos.left + rightMostWidth) { 499 | // Scroll it into view 500 | currScroll = scroll.scrollLeft(); 501 | scroll.scrollLeft( 502 | currScroll - 503 | (rightMostPos.left + rightMostWidth - cellPos.left) 504 | ); 505 | } 506 | } 507 | 508 | // If there are fixed columns to the right 509 | if (this.c.end > 0) { 510 | // Get the number of columns and the width of the cell as doing right side calc 511 | let numCols = this.s.dt.columns().data().toArray().length; 512 | let cellWidth = $(cell.node()).outerWidth(); 513 | 514 | // Get the leftmost right fixed column header and it's position 515 | let leftMost = $( 516 | this.s.dt.column(numCols - this.c.end).header() 517 | ); 518 | let leftMostPos = leftMost.offset(); 519 | 520 | // If the current highlighted cell is right of the leftmost cell on the screen 521 | if ($(cell.node()).hasClass(this.classes.fixedRight)) { 522 | scroll.scrollLeft(scroller.scrollWidth - scroller.clientWidth); 523 | } 524 | else if (cellPos.left + cellWidth > leftMostPos.left) { 525 | // Scroll it into view 526 | currScroll = scroll.scrollLeft(); 527 | scroll.scrollLeft( 528 | currScroll - 529 | (leftMostPos.left - (cellPos.left + cellWidth)) 530 | ); 531 | } 532 | } 533 | }); 534 | } 535 | 536 | /** 537 | * Sum a range of values from an array 538 | * 539 | * @param widths 540 | * @param index 541 | * @returns 542 | */ 543 | private _sum(widths: number[], index: number, reverse: boolean = false) { 544 | if (reverse) { 545 | widths = widths.slice().reverse(); 546 | } 547 | 548 | return widths.slice(0, index).reduce((accum, val) => accum + val, 0); 549 | } 550 | } 551 | -------------------------------------------------------------------------------- /examples/initialisation/scrollX.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | 19 | 29 | 30 | 31 | Only Horizontal Scrolling 32 | 33 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 |
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior JavaScript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavaScript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSydney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSydney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior JavaScript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavaScript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
697 | 698 | 699 | 700 | -------------------------------------------------------------------------------- /examples/integration/fixedHeaderFooter.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | 25 | 26 | 43 | 44 | 45 | FixedHeader with Footer 46 | 47 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 |
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior JavaScript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavaScript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSydney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSydney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior JavaScript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavaScript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
713 | 714 | 715 | 716 | --------------------------------------------------------------------------------