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

Explanation#

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:

$('#table').DataTable({
  // 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,
})

https://datatables.net/reference/option/scrollY

IE11: https://stackoverflow.com/a/62605729/7712266

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": https://datatables.net/download/release#FixedHeader

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: https://datatables.net/extensions/index

Fixed First Column#

For 1.x and 2.x#

After depending on DataTables, import the FixedColumns extension: https://datatables.net/download/release#FixedColumns

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="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap5.min.css" />
<abp-script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js" />
<abp-script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/fixedColumns.bootstrap5.min.js" />

It is better to add the npm package:
However, please note that adding the npm package may cause the version of the datatables.net-bs5 package to change, because in the project, it is specified that version 4.3.0 requires a version of the datatables.net-bs5 package that is not lower than a certain version. This may cause incompatibility with the datatables.net 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.

Open the terminal in the Web project and execute yarn add datatables.net-fixedcolumns-bs5@4.3.0
Add the following to the mappings object in Web\abp.resourcemapping.js:

"@node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css": "@libs/datatables.net-fixedcolumns-bs5/css/",
"@node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js": "@libs/datatables.net-fixedcolumns/js/",
"@node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js": "@libs/datatables.net-fixedcolumns-bs5/js/",

Execute abp install-libs
Replace the CDN dependencies:

<abp-style src="/libs/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css" />
<abp-script src="/libs/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js" />
<abp-script src="/libs/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js" />

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

$('#table').DataTable({
  fixedColumns: true,
})

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

$('#table').DataTable({
  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.