DataTables logo
≡

dataTables.rowFill

RowFill

  • Author: SpryMedia Ltd
  • Requires: DataTables 3+

This feature plug-in for DataTables will automatically insert temporary rows into a DataTable that draws a page that is less than the configured page length. This can be handy to ensure that your table always as (e.g.) 10 rows visible.

Filler rows have the class dt-rowFill--filler assigned to them allowing for additional styling (e.g. reducing opacity).

To enable for a table add rowFill: true to your DataTables configuration:

const table = new DataTable('#myTable', {
 rowFill: true
});
  • License: MIT

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/features/rowFill/dist/dataTables.rowFill.mjs';

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!