- Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog 3.0
- RTL version
- Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
- Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
- Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
- Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
- Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
- Tables
- Basic tables
- Data tables
- Data tables extensions
- Responsive tables
- Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
Left fixed column
When displaying a table which scrolls along the
x-axis
, it can sometimes be useful to the end user for the left most column to be fixed
in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns'
in Excel. This can be achieved with the FixedColumns
plug-in for DataTables, as shown below.
First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|
First name | Last name | Position | Office | Age | Start date | Salary | Extn. | E-mail |
---|---|---|---|---|---|---|---|---|
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
First name |
---|
Airi |
Ashton |
Brielle |
Cedric |
Charde |
Colleen |
Garrett |
Haley |
Herrod |
Jena |
Right fixed column
FixedColumns has the ability to freeze columns on both the left and right hand sides of the table. By default it will fix the first column on the left, but using the initialisation parameters
leftColumns
and rightColumns
you can alter this to fix the columns on the right as well. This example shows a single column fixed in place, in this case the right most column.
First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|
First name | Last name | Position | Office | Age | Start date | Salary | Extn. | E-mail |
---|---|---|---|---|---|---|---|---|
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Multiple fixed columns
FixedColumns allows columns to be fixed from both the left and right hand sides of the table. Fixing right hand-side columns is done by using the
rightColumns
initialisation parameter, which works just the same as leftColumns
does for the left side of the table. This example shows both the left and right columns being fixed in place.
First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
---|
First name | Last name | Position | Office | Age | Start date | Salary | Extn. | E-mail |
---|---|---|---|---|---|---|---|---|
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
First name |
---|
Airi |
Ashton |
Brielle |
Cedric |
Charde |
Colleen |
Garrett |
Haley |
Herrod |
Jena |
Complex headers
If you are using multiple rows in the table header, it can be useful to have a
rowspanning
cell on the column(s) you have fixed in place - equally at other times it can be useful to not and make use of the two or more cells per column. FixedColumns builds on the complex header support in DataTables to make this trivial to use in FixedColumns. Just initialise your FixedColumns
instance as you normally would!
Name | HR Information | Details | ||||||
---|---|---|---|---|---|---|---|---|
Username | Position | Office | Age | Start date | Salary | Extn. |
Name | HR Information | Details | ||||||
---|---|---|---|---|---|---|---|---|
Username | Position | Office | Age | Start date | Salary | Extn. | E-mail | |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $405,500 | 2360 | c.hurst@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $113,500 | 3597 | h.kennedy@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Name |
---|
Airi |
Ashton |
Brielle |
Cedric |
Charde |
Colleen |
Garrett |
Haley |
Herrod |
Jena |
© 2015 - 2018. Limitless Web App Kit by Eugene Kopyov