Data Table does not initiliase when using state

Questions
1

I pull the columns etc to use from the db and need to conditionally render the DataTable. When I use an initialising state variable as a condition for rendering it does not initialise. With no state guard it does.
The example below is distilled to show the issue. My code is more complicated and unfortunately I cannot lift the state and have to find a way to get the DataTable initialised on a non-first render of the hosting container.

2

here => jovial-architecture-w8b5x4 - CodeSandbox

3

Hi @deejay . Thanks for the answer. However I don’t see that it solves the initialisation issue as the example you provided does not need to be initialised.

For collapsible tables it does need to be initialised. (see documentation note: * data-table-collapsible - additional table class to enable collapsible logic. Note that “data-table-init” class is also required for this.). I’ve added the class data-table-collapsible to your code and now when it runs it shows the error: eloquent-haze-dpctff - CodeSandbox

When the table is properly initialised and in collapsible mode it adds the attribute data-collapsible-title to each row, but when it does not initialise that attribute is missing and the collapsible rows do not display correctly (the column headings disappear and only the data is shown).

According to the documentation DataTable initialisation is also required to enable other properties such as selectable rows, ie * data-table-init - additional class to enable JavaScript action required for selectable rows.

4

edit => jovial-architecture-w8b5x4 - CodeSandbox

5

Good one, thanks.

To summarise:
There is a bug that DataTable does not initialise when using state. The workaround is as follows:

collapsible: place data-collapsible-title atribute on td tag

selectable: add data-table-row-selected class to tr tag when selected, manage checkboxes state manually, and set the header checkbox indeterminate property as needed.

6

it’s not a bug, but it’s complicated.

when dataTable is init, those 3 line are getting called

table.attachEvents();
table.setCollapsibleLabels();
table.checkSelectedHeader();

#add items dynamically:
[checkbox, collapsible] => you need to set it
it’s not a bug => setCollapsibleLabels and checkSelectedHeader already invoked.

#late-init table
[checkbox, sortable] events will work only in core (not in vue/react/svelte)

i guess snabbdom do it better…

btw @nolimits4web :
this line => framework7/data-table-class.js at master · framework7io/framework7 · GitHub
shuold be:

// - table.attachEvents();
// + table.detachEvents();

tests:
core => f7-table-core - CodeSandbox
vue => f7-table-vue - CodeSandbox
react => f7-table-react - CodeSandbox
svelte => f7-table-svelte - CodeSandbox

core => {
  static => {
    collapsible: true
    selectedHeader: true
    events: [checkbox, sortable]
  }
  dynamic => {
    collapsible: false
    selectedHeader: false
    events: [checkbox, sortable]
  }
}

vue => {
  static => {
    collapsible: true
    selectedHeader: true
    events: [checkbox, sortable]
  }
  dynamic => {
    collapsible: false
    selectedHeader: false
    events: nothing
  }
}

react => {
  static => {
    collapsible: true
    selectedHeader: true
    events: [checkbox] // no idea how to do sortable
  }
  dynamic => {
    collapsible: false
    selectedHeader: false
    events: nothing
  }
}

svelte => {
  static => {
    collapsible: true
    selectedHeader: true
    events: [checkbox, sortable]
  }
  dynamic => {
    collapsible: false
    selectedHeader: false
    events: nothing
  }
}