DataTables (1.x and 2.x) Fixed Header and First Column


The usage of DataTables 1.x and 2.x is different, please read carefully.

Please note that different UI choices require different libraries, and their dependency files are completely different. For example, I use ABP, which internally defaults to using Bootstrap 5.


Fixed Header#

For 1.x#

The simplest way to fix the header is to set the height (in pixels) of the table content, and a scrollbar will appear when it exceeds the height:

  // The value given here can be any CSS unit or a number (in which case it will be treated as a pixel measurement) and applies to the table body (i.e. it does not directly consider the header or footer heights).
  scrollY: 400,


You can also use FixedHeader in DataTables 1.x by downgrading to the last supported version 3.4.0, but this requires importing the css and js files of this extension. Refer to the instructions below "For 2.x":

For 2.x#

The fixedHeader: true property mentioned in some online articles currently requires DataTables 2.x (it can also be used in 1.x by downgrading, and the last supported version is 3.4.0). In 2.x, similar functionalities like fixedHeader exist in the form of extensions. This means that before using them, you need to include the code for the dependent extensions in addition to DataTables. Refer to the download links below:

You can view all extensions here:

Fixed First Column#

For 1.x and 2.x#

After depending on DataTables, import the FixedColumns extension:

If you are using DataTables 1.x, you can only use the last supported version 4.3.0, because later versions require Database 2.x:

<abp-style src="" />
<abp-script src="" />
<abp-script src="" />

It is better to add the npm package:
However, please note that adding the npm package may cause the version of the package to change, because in the project, it is specified that version 4.3.0 requires a version of the package that is not lower than a certain version. This may cause incompatibility with the package and result in an error, although this is for compatibility purposes, it is very troublesome. For now, I am using the CDN address to import it.

  1. Open the terminal in the Web project and execute yarn add
  2. Add the following to the mappings object in Web\abp.resourcemapping.js:
"@node_modules/": "@libs/",
"@node_modules/": "@libs/",
"@node_modules/": "@libs/",
  1. Execute abp install-libs
  2. Replace the CDN dependencies:
<abp-style src="/libs/" />
<abp-script src="/libs/" />
<abp-script src="/libs/" />

Then, refer to the documentation for configuration. This will fix the first column on the left:

  fixedColumns: true,

If you need to fix both the left and right columns, you can refer to the documentation and add the following configuration:

  fixedColumns: {
      left: 1,
      right: 1

Please note that the values of left and right represent the number of columns to fix on the left or right, not the index. Setting it to 0 will not fix any columns.

Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.