Issue with semantic UI

YOM

Apologies for not being able to link a test case or a debugger report. A test case is not possible because I am currently developing it via localhost. A debugger report is not possible due to the fact that I am running it in a react app which appears to make the table out of scope for the debugger.

Everything works perfectly with the standard dt stylesheets, but when I switch to Semantic UI only the buttons and scrollbar get formatted while the table itself remains unstyled.

I required the packages as follows at the top of my DataTablesEditor component. I have tried both with and without the top 5 packages required with the same result:

require('datatables.net');
require('datatables.net-buttons');
require('datatables.net-select');
require('datatables.net-editor');
require('datatables.net-colreorder');

require('datatables.net-buttons/js/buttons.colVis.min.js');
require( 'datatables.net-se' );
require( 'datatables.net-editor-se' );
require( 'datatables.net-buttons-se' );
require( 'datatables.net-colreorder-se' );
require( 'datatables.net-select-se' );

Here are the relevant npm package versions:

"dependencies": {   
    "datatables.net-buttons": "^1.6.2",
    "datatables.net-buttons-dt": "^1.6.2",
    "datatables.net-buttons-se": "^1.6.2",
    "datatables.net-colreorder": "^1.5.2",
    "datatables.net-colreorder-dt": "^1.5.2",
    "datatables.net-colreorder-se": "^1.5.2",
    "datatables.net-dt": "^1.10.21",
    "datatables.net-editor": "^1.6.5",
    "datatables.net-editor-dt": "^1.6.3",
    "datatables.net-editor-se": "^1.6.3",
    "datatables.net-se": "^1.10.21",
    "datatables.net-select": "^1.3.1",
    "datatables.net-select-dt": "^1.3.1",
    "datatables.net-select-se": "^1.3.1"
}

"devDependencies": {
    "datatables.net": "^1.10.21",
    "jquery": "^3.5.1"
  }

Any suggestions would be greatly appreciated.

Thanks,
Phil

colin

Yep, we'll need to see that I'm afraid. With styling, there are too many moving parts (as you've found out).

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

YOM

Ok, fair enough. Due to it being run on react with serverside processing, I don't see a way to replicate it on one of those websites without significant effort. I can open my firewall and send you a pm with the ip and credentials so you can take a look at it. I will also share my options parameters below:

options: {
  dom: 'Blrtip', // https://datatables.net/reference/option/dom
  processing: true,
  serverSide: true,
  select: true,
  paging: true,
  paginate: true,
  pageLength: 10,
  lengthChange: true,
  scrollX: true,
  scrollY: window.innerHeight - 200,
  scrollCollapse: true,
  stateSave: true,
  colReorder: true,
  deferRender: true,
}

YOM

Ah this was a very stupid mistake. My table element was missing: className="ui celled table"

Thanks for taking the time to respond.