Is there a way to enable filtering and pagination for datatables

[gusmb]

I am rendering markdown documentation from templates with large datatables. Right now I have enabled the sortable columns feature as explained in the docs. Is there a way to enable filetering on columns and pagination to avoid printing the whole table at once?

[squidfunk]

Material for MkDocs doesn't provide this functionality out of the box, but it's not difficult to add by using a third-party library, for example something like TableFilter. Integration is similar to TableSort.

[gusmb]

I was playing around with dataTables and got what I was looking for. The downside is that they are not markdown tables but plain HTML syntax. Wish there was a native markdown solution at some point in the future :)

[squidfunk]

Yeah, Markdown tables are meh. I think I've seen some extensions to the standard Markdown table syntax, but can't remember.

[plbremer]

@gusmb @squidfunk
Are you able to advise? I am trying to do what Gus did for my own documents.

I have:

1. Updated the extra_javascript portion of mkdocs.yaml to remove conflicts from filter
2. Put what I believe to be the right unpkg link

extra_javascript:
  # - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  # - javascripts/tablesort.js
  - https://unpkg.com/tablefilter@0.7.3/dist/tablefilter/tablefilter.js
  - javascripts/tablefilter.js

3. Attempted to instantiate a filter class in a way analogous to the way presented in the Tablesort example

document$.subscribe(function() {
//   var myTF = new TableFilter(document.querySelector(".my-table"));
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new TableFilter(table)
  })
})

Of course, "nothing shows up". I suspect that my .js gist is not working. Any advice? Thanks

[alexvoss]

@plbremer, thanks for confirming that it works as I don't use it myself.

@revati-naik do you have the lines in the mkdocs.yml that load both the tablefilter code and the extra code I posted to initialize it?

extra_javascript:
  - https://unpkg.com/tablefilter@0.7.3/dist/tablefilter/tablefilter.js
  - assets/javascript/tablefilter.js

The latter you'd need to adapt to wherever you put that code.

If yes, feel free to post a minimal reproduction and I will look at it.

[revati-naik]

@alexvoss Here you go

tablefilter.js

document$.subscribe(function() {
    var tables = document.querySelectorAll("article table:not([class])")
    tables.forEach(function(table) {
      var tf = new TableFilter(table, {
        base_path: "https://unpkg.com/tablefilter@0.7.3/dist/tablefilter/",
        filters_row_index: 0,
      })  
      tf.init()
    })  
  })

mkdocs.yml

extra_javascript:
- https://unpkg.com/tablefilter@0.7.3/dist/tablefilter/tablefilter.js
- javascript/tablefilter.js

EDIT: Great! I got this working. Adding this really messes up my existing tables :D

What I am looking for is adding pagination and search in table features. Is this possible? I am looking at the filter configuration page, but not something I see directly in this list. Is there some way to get this feature integrated?

[alexvoss]

Please provide a minimal reproduction so I can look at the problem. I also need to know what is not working. Two code snippets don't tell me that. What is it that this should be doing or not doing and are you getting any messages on the JavaScript console?

[plbremer]

it would be great if you could post how you got it working for future viewers

[revati-naik]

I had to mention the right base_path as suspected above. Fixing that, made the filter available. Rest everything works as expected. Thanks!