Answers

• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 8

  Hi,

  Great question. No, the Vue component itself doesn't need an update (same with React), as the DataTables core library is shipped separately and you tell it what to use - e.g.

  npm install datatables.net-vue3
  npm install datatables.net-dt@beta
  

  Then you just continue to use:

  import DataTable from 'datatables.net-vue3'
  import DataTablesCore from 'datatables.net-dt';
  
  DataTable.use(DataTablesCore);
  

  Here is a trivial example that the download builder built for me.

  Allan
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 8

  Thanks!

  In that case, I think have encountered a few issues with the update.

  • The buttons extension does not work, I encounter DataTables warning: table id=DataTables_Table_0 - Unknown feature: buttons on page load
    Example: https://stackblitz.com/edit/qasubpxy-dh6wqlwt?file=src%2FApp.vue

  • I use the columns().columnControl.searchClear() api to programmatically clear column control searches. This no longer works - getting Uncaught TypeError: can't access property "searchClear", table.columns().columnControl is undefined
    Example: https://stackblitz.com/edit/qasubpxy-o9zwgnb4?file=src%2FApp.vue

  • for serverside rendering, the processing = true loading animation no longer displays. Not sure how to get an example of that on stackblitz though.

  Working example of the first two. Only difference is the installed versions: https://stackblitz.com/edit/qasubpxy-yglnsk24?file=src%2FApp.vue
• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 8

  Agreed - many thanks for spotting that and letting me know. The issue is with the dependency version tag for the Vue component:

    "peerDependencies": {
      "datatables.net": "^2",
      "vue": "^3.0.5"
    },
  

  If you ctrl-c the server in StackBltiz and then npm install datatables.net@beta to override the peer dependency from the Vue component, it will run as expected.

  The fix will be to increase the range that the component supports to be datatables.net: '2 - 3'. I'll do that and publish an update to the component tomorrow.

  Regards,
  Allan
• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 9

  I've just released datatables.net-vue3 version 3.0.5 which addresses this issue. Here is a little example.

  Allan
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 9

  Thanks for the quick response Allan.

  datatables.net-vue3@3.0.5 is still installing datatables.net@2.3.7 which means the issue is still there: https://stackblitz.com/edit/koj9creq-crns8fqn?file=src%2FApp.vue,package.json

  and overriding the datatables.net dependency to 3.0.0-beta.1 results in NPM freaking out. (however it does run if it's forced!) https://stackblitz.com/edit/koj9creq-nxpdln5g?file=src%2FApp.vue,package.json

  Also, the processing animation (three blue dots) still does not play, but I don't think this is related to the Vue component.

  Here's an example of the stable version (nothing will load with this example, but the animation should still play): https://live.datatables.net/vuqomita/8/edit

  Here's an example of the beta version with the processing animation not present: https://live.datatables.net/socusoni/1/edit
• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 9 Answer ✓

  Gah - sorry. The version range string I used doesn't allow beta releases. I've tagged and released 3.0.6 of the package which does!

  https://stackblitz.com/edit/koj9creq-jifh9uwd?file=package.json,src%2FApp.vue

  Also, you are right about the processing not showing up! I changed a CSS variable name at some point after working on that (for a different part), which causes it not to be styled to be visible. It is there, just can't be seen (which is why my unit tests didn't fail).

  As a workaround, add the following to your CSS:

  :root {
      --dt-processing-circle_background: var(--dt_background-selected);
  }
  

  Fix committed here.

  Allan
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 9

  Perfect, Thanks!
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 9 edited April 9

  @allan Actually I have encountered another problem. Not sure if I should make another thread or not

  The performance is worse in my server side rendered application, I don't know how I can get it to happen in a stackblitz instance though. I've screen recorded what I'm seeing though so hopefully that might help:

  Normally all three pages would have a datatable, I've just commented out the other two in these recordings.
  On current stable build: https://streamable.com/i97wrn
  - Page switching is responsive as expected
  - Filtering works at the expected speed and clearing the filters also works
  On beta build: https://streamable.com/3pgdqa
  - Page switching is significantly slower when the Datatable is rendered
  - Clearing the filter with the button causes the page to go completely non-responsive to the point the tab has to be force closed.
  - I can see the request after clearing the filters succeeds on both backend API and in the browser devtools, but it stays completely non responsive
  - It might be worth noting that clearing the search manually works without crashing, albeit slower than it used to be.

  The clear search button is a custom Vue component, all it does when clicked is call this method:

  function clearSearch() {
    if (!dt) return;
  
    dt.columns().columnControl.searchClear();
    dt.search("");
    dt.draw();
  }
  

  The only difference between those two clips are the installed version of DataTables

  Not sure what could be going on here
• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 10

  Hi,

  Are you able to PM me a link to the page so I can profile the client-side please?

  Thanks,
  Allan
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 10

  Hi Allan,
  Unfortunately I can't as it's not an application that is publicly exposed.
  Is there anything I could do locally to try to debug?
• coreyg142 Posts: 11Questions: 1Answers: 0

  April 10

  I've done some more testing this morning and I believe I've found the culprit.

  I use a Pinia store to make the datatable API accessible to other components in the project for various functions

  import { Api } from 'datatables.net';
  import { defineStore } from 'pinia';
  import { Ref, ref } from 'vue';
  
  export const useTestStore = defineStore('testStore', () => {
    const dataTable: Ref<Api | null> = ref(null);
    function setDataTable(func: Api) {
      datatable.value = func;
    }
  
    return {
      setDataTable,
      dataTable,
    };
  });
  

  I found that removing the call to setDataTable in onMounted restores the application to its former level of performance.

  Even using a test store like defined above that is only a simple getter and setter whose getter is not used anywhere still results in this slowdown.

  Removing the getter from the store return value and only returning the setter or methods that use it also fixes the issue.

  I'm not sure why this would have been causing this symptom, but it's not a huge deal since I can just move any logic that uses the getter into the store!
• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  April 10

  Interesting - many thanks for looking more into it. I'm honestly not sure why that would be causing an issue in v3, although I am glad it isn't something fundamental that I missed . Without being able to profile it, my guess is that the store is storing the full settings object for DataTables and there is some overhead there that is different in v3? I'll try to setup an example at some point, but in the meantime, if yourself or anyone else is able to create an example I can profile that.

  For now though, good to hear you have a workaround .

  Allan