FixedColumns
Fix one or more columns in place on a scrolling DataTable
Install / Use
/learn @DataTables/FixedColumnsREADME
FixedColumns
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).
Installation
To use FixedColumns the primary way to obtain the software is to use the DataTables downloader. You can also include the individual files from the DataTables CDN. See the documentation for full details.
NPM and Bower
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.
Please see the DataTables NPM and Bower installation pages for further information. The DataTables installation manual also has details on how to use package managers with DataTables.
Basic usage
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.
Example:
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
} );
} );
Documentation / support
GitHub
If you fancy getting involved with the development of FixedColumns and help make it better, please refer to its GitHub repo.
Related Skills
node-connect
347.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
108.0kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
347.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
347.2kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
