How do I get semantic UI to work on my table

hm123 · August 2017

DataTables makes it really convenient to display spreadsheets, and it looks great when other users are able to integrate Semantic UI with their tables as described here:

https://datatables.net/extensions/buttons/examples/styling/semanticui.html

I haven't been able to get it to work on mine though, I've loaded the semantic js and css files externally as you can see in this jsfiddle:

https://jsfiddle.net/ctd2xpfg/

Could someone point me in the right direction? With examples if possible. Thanks.

kthorngren · August 2017

You setup the "External Resources" to use semanticui include files. But the HTML portion of the file is loading bootstrap files. This is probably resulting in conflicting CSS and JS file.

Kevin

hm123 · August 2017

I've removed the external resources and have now setup the HTML to load the semantic CSS and JS files. Where do I go from here?

tangerine · August 2017

You still have bootstrap CSS and DataTables' bootstrap integration CSS.
Probably conflicting, as Kevin already said.

kthorngren · August 2017

You are still loading the bootstrap files.

Are you trying to use export buttons? If so you haven't loaded all the needed JS files nor configured Datatables to display them.

Kevin

hm123 · August 2017

Sorry I missed that, I've now removed the 2 files of Bootstrap (JS and CSS), and left the 2 files of DataTables Bootstrap Integration (JS and CSS) in the HTML.

I've also added the 2 files of Buttons (JS and CSS) in the HTML.

https://jsfiddle.net/hm123/ctd2xpfg/

Yes I want to use the Export Buttons, along with Semantic UI. How should I set the JavaScript configuration for that?

kthorngren · August 2017

The example you referenced has an example:
https://datatables.net/extensions/buttons/examples/styling/semanticui.html

Each export button requires different JS files to be included. The example contains the list. You will need to add the buttons, the example shows you how.

Here is the Buttons docs:
https://datatables.net/extensions/buttons/

Kevin

hm123 · August 2017

I see. I've added each JS file required by each Export Button.

I can't seem to be able to get the code referenced in the example to work in my script. What am I missing?

https://jsfiddle.net/hm123/ctd2xpfg/

kthorngren · August 2017

It doesn't look like you are loading buttons.semanticui.min.js. You are loading dataTables.buttons.min.js twice. Remove one of them.

You have a function that gets the data then initializes the HTML Table then Datatables. This is the one you want to configure for the buttons. Add your buttons: [ 'copy', 'excel', 'pdf', 'colvis' ] and table.buttons().container() inside the function.

Below that you have a configuration to initialize Datatables and add the buttons. You should remove this because its not going to work. First when this executes the table has not been inserted into HTMl by the function. Second is you can't initialize Datatables twice without some other coding to clear or destroy the first Datatable.

Kevin

hm123 · August 2017

It seems I mixed up the JS files, I've now corrected that.

Do I need to completely remove these 2 Bootstrap related CSS and JS files (Bootstrap DataTables Integration files) in order to get the Semantic UI working?

<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">

<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

And will there be any conflict if I use both this regular Buttons CSS and this Semantic UI Buttons CSS together?

<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.semanticui.min.css">

<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">

I've tried inserting the Buttons JavaScript, but obviously I'm doing it wrong because either I get no table, or I get the table but with errors and no buttons. How can I fix this?

https://jsfiddle.net/hm123/1tg7jjch/1/

//initialize the DataTable object and put settings in
    table = $("#mySelection").DataTable({
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [
        [0, "asc"]
          ],
        buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
      "pagingType": "simple" //no page numbers
        //uncomment these options to simplify your table
        //"paging": false,
        //"searching": false,
        //"info": false
   });
   table.buttons().container()
        .appendTo( 
   $('div.eight.column:eq(0)', 
   table.table().container()) );

If it weren't for the helpful community here at the DataTables forum I'd have given up on this by now.

allan · August 2017

Yup - I'd second that. This community is awesome. Thanks to people like Kevin for making it that way! .

And will there be any conflict if I use both this regular Buttons CSS and this Semantic UI Buttons CSS together?

What I would suggest to get Semantic UI working is to use the download builder - select "Bootstrap" as the styling option, and select the components you want. Then at the bottom, click the Individual files option. Copy the HTML from the bottom of the page and replace all instances of "bootstrap" with "semanticui". The download builder just hasn't been updated to include Semantic UI support yet (I'm kind of waiting on Bootstrap 4 to go beta, since I'll update it for that as well and want to just get it all done together).

Allan

kthorngren · August 2017

Looks like you have a couple issues. You are still loading "dataTables.bootstrap.css". Run through the download builder as Allan suggested. Getting the correct files and putting them in the correct order is sometimes not easy.

Take a look at the browser's console and you will see a couple of errors:

Unexpected string

This is due to not having a comma at the end of this line:

buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]

Uncaught TypeError: Cannot read property 'defaults' of undefined - buttons.semanticui.min.js:5

I think this is because you are loading buttons.semanticui.min.js before the base buttons code of dataTables.buttons.min.js. Reverse the order of these two lines.

Kevin

hm123 · August 2017

I never expected the dev himself to answer my beginner question. I'd like to take this moment to say that DataTables is an awesome piece of software. Convenient and fully featured compared to the other table tools out there. Keep up the good work Allan.

And thanks a lot to Kevin as well, if it weren't for the fact he had stated himself he was just a user, I'd have thought him to be an admin or mod around here.

I've removed all instances of Bootstrap and replaced them with Semantic UI.

I tried inserting the UI styling, but nothing changes:

$('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui celled table table-striped table-condensed table-responsive" id="mySelection"></table>'

I've also added the comma and loaded the base Buttons JS before the Semantic UI Buttons JS. This makes the buttons show, thankfully, but only the 'copy' and 'columnvisibility' buttons seems to work, the 'excel' and 'pdf' buttons, when clicked, try to download, but end up 'failed due to an unknown error'.

https://jsfiddle.net/hm123/1tg7jjch/5/

kthorngren · August 2017

I'm able to successfully download and open both Excel and PDF exports from your example. I tried with Chrome and Firefox on the Mac. What browsers have you tried with?

Kevin

hm123 · August 2017

I see. It seems this display error is specific to Android, yet it actually completes the download as they are in the downloads folder.

It seems the community is aware of this issue: https://datatables.net/forums/discussion/42607

I'm sure Allan will get it fixed whenever it's convenient.

Anyhow, what have I done wrong with my Semantic UI implementation?

kthorngren · August 2017

Anyhow, what have I done wrong with my Semantic UI implementation?

I'm not familiar with how this UI should look or behave. What specifically is wrong?

Kevin

hm123 · August 2017

Semantic UI makes tables look amazing with its stackable layout:
https://semantic-ui.com/collections/table.html

It should be simple enough, just load the Semantic UI CSS and JS:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">

  <link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css">

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.semanticui.min.js"></script>

And apply that styling to the table here:

$('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui celled table table-striped table-condensed table-responsive" id="mySelection"></table>'

But nothing changes for me:
https://jsfiddle.net/hm123/1tg7jjch/5/

Everyone else seems to have been able to get it to work with DataTables in their examples:

https://datatables.net/extensions/buttons/examples/styling/semanticui.html

https://datatables.net/forums/discussion/30264/eta-on-semantic-ui-styling

https://datatables.net/forums/discussion/24163/feature-request-semantic-ui

kthorngren · August 2017

Your lines loading the CSS are not syntactically correct. They should look like this:

<!--SEMANTIC UI CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" type="text/css" />

  <link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css" rel="stylesheet" type="text/css" />

<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.semanticui.min.css" rel="stylesheet" type="text/css" />

 <!-- BUTTONS CSS -->
<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

Notice the end of each line looks like this: rel="stylesheet" type="text/css" />
With a "/" at the closing ">".

I think you can remove the 4th CSS for "dataTables.min.css".

That should provide the display you are expecting.

Kevin

hm123 · August 2017

I missed the CSS syntaxing, corrected that now.

I've also removed this 4th Button CSS:

<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

I've applied the Semantic UI styling on the table:

$('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui celled table table-striped table-condensed table-responsive" id="mySelection"></table>'

And it works beautifully. Thanks Kevin.

https://jsfiddle.net/hm123/utyp73yu/10/

hm123 · August 2017

If I wanted to align individual columns in different ways(left, right, center), what would be the best way to do that?

Also, how do I get the Paging CSS (Show 'X' entries) to show up in Semantic UI as in this example:
http://jsfiddle.net/kmd1970/37enwegd/

And is it possible to export as an image (PNG or JPEG, with just the copied text saved as a graphic with a plain background)?

allan · August 2017

And thanks a lot to Kevin as well, if it weren't for the fact he had stated himself he was just a user, I'd have thought him to be an admin or mod around here.

He does deserve a promotion, no question - but I'm not sure mod/admin is a promotion...! ;-)

If I wanted to align individual columns in different ways(left, right, center), what would be the best way to do that?

Apply one of the Semantic UI classes for text alignment using columns.className.

Also, how do I get the Paging CSS (Show 'X' entries) to show up in Semantic UI as in this example

Are you loading the Semantic UI Javascript?

And is it possible to export as an image (PNG or JPEG, with just the copied text saved as a graphic with a plain background)?

Darn good question. Currently no - that isn't something that DataTables provides, but if we can get an image from the HTML table, it would be relatively easy to do (its that getting the image part that I'm not sure about).

Allan

hm123 · August 2017

I've tried your suggestion with the columns, but maybe I'm doing it wrong, as nothing changes:

 "columnDefs": [
    { className: "col_3", "targets": [ 2 ] }, ],

I notice this sets my footer and column headings below the table (which was previously set on top)

$('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui celled table table-striped table-condensed table-responsive" id="mySelection"><tr class="right aligned" id= "col_3"></tr></table>'
    );

Is there a way to align individual columns with CSS?

col_3 {text-align: right};

My jsfiddle:
https://jsfiddle.net/hm123/utyp73yu/14/

Yes I'm loading the Semantic UI JS:

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.semanticui.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.semanticui.min.js"></script>

I was wondering, does the PagingType option affect table render speeds?

allan · August 2017

col_3 {text-align: right};

Should be:

td.col_3 {text-align: right};

I was wondering, does the PagingType option affect table render speeds?

No.

Allan

hm123 · August 2017

Changed the CSS, but still no luck with the individual column alignment.

https://jsfiddle.net/hm123/utyp73yu/16/

What could I be doing wrong to have the Paging button (Show 'X' entries) to show up in regular DataTables CSS instead of Semantic UI CSS?

I was also wondering if it is possible to output as doc (word, Google docs readable) the way we output to excel or PDF?

As for copy,

I inserted the following code to change the output, but my edits don't show in the clipboard:

"buttons": [
            {
                extend: 'copy',
                messageBottom: 'test message',
                header: 'false',
               
                exportOptions: {
                    columns: [':visible' ],
                    rows: [':visible'],
                }
            }, ]

How do I add a blank line break between every cell text in the output? Which of these in which configuration do I use: fieldSeparator, fieldBoundary, newline

Is it possible to output to the clipboard in the following format:

(Column header 1 text) followed by
(Cell 1 text )
<line break, double blank empty line>
(Column header 2)
(Cell 2 text)
<line break, blank empty line>
Etc...
(Custom bottom message)

Example:

Company: 1ST AMERICAN LAW CENTER, INC., A CALIFORNIA CORPORATION

Claims: 15

Total Awarded: $135,045.23

(double blank line break)

Company: ABC TRANSPORT, INC., A CALIFORNIA CORPORATION

Claims: 12

Total Awarded: $108,910.99

(Custom bottom message here)

As opposed to the current squashed up format:

(Column header 1) (Column header 2) (Column header 3) (Cell 1) (Cell 2) (Cell 3)

Example:

Company Claims Total Awarded
1ST AMERICAN LAW CENTER, INC., A CALIFORNIA CORPORATION 15  $135,045.23
ABC TRANSPORT, INC., A CALIFORNIA CORPORATION   12  $108,910.99

kthorngren · August 2017

Changed the CSS, but still no luck with the individual column alignment.

Try this:

  .dataTable tbody td.col_3 {
      text-align: right;
      }

What could I be doing wrong to have the Paging button (Show 'X' entries) to show up in regular DataTables CSS instead of Semantic UI CSS?

I removed this to change the style of the info text. You will need to do the same in your code:

    body {
            margin: 0;
            padding: 0;
            font: 14px/1.4 Arial, Helvetica, sans-serif;
            color: black;
        }

Is it possible to output as doc (word, Google docs readable) the way we output to excel or PDF?

There is not a Datatables Extension for this. Not sure if there are other tools that can export a table into Word format.

How do I add a blank line break between every cell text in the output?

You can use the customize function within the copy button to modify the output. This isn't exactly what you want but its a start:

            {
                extend: 'copy',
                messageBottom: 'test',
                header: 'false',
                
                exportOptions: {
                    columns: [':visible' ],
                    rows: [':visible']
                },
                customize: function( data ) {
                    console.log(JSON.stringify(data));
                  // code to manipulate the data string as desired
                  data = data.replace( /\n/g, '\n\n' );
                  data = data.replace( /\t/g, '\n' );
                  return data;
                }
            },

It outputs the raw string so you can see the raw string in the console. Then uses a couple of regex replacements to modify the string. The first replaces each \n with two for a line break between each row. Then it replaces \t with \n for a line break between each column. I don't want to take all the fun from you so I'll let you update the regex's to add the "Claims:" and "Total Awarded:". If you have troubles with this post back. Regex is not always easy if you aren't familiar with it. Finally it returns the updated data.

Kevin

hm123 · August 2017

That column alignment worked perfectly.

As for changing the PagingButton CSS (show 'X' entries'), I tried your instruction:

I removed this to change the style of the info text. You will need to do the same in your code:

body {
        margin: 0;
        padding: 0;
        font: 14px/1.4 Arial, Helvetica, sans-serif;
        color: black;
    }

But the PagingButton still looks like the default, is there some further step needed to make it show up in Semantic UI CSS?

Also, What would be the best way to get the content of two cells of two different columns to show up side by side? Kind of like a merge, or span. Meaning instead of this:

h1  |   h2  |  h3  |  h4   |  h5
c1  |   c2  |  c3  |   c4  |  c5
c1  |   c2  |  c3  |   c4  |  c5

To show up like this (first 2 columns, header and data, side by side):

h1 h2  |  h3  |   h4  |  h5
c1 c2  |  c3  |   c4  |  c5
c1 c2  |  c3  |   c4  |  c5

I don't want to take all the fun from you so I'll let you update the regex's to add the "Claims:" and "Total Awarded:". If you have troubles with this post back. Regex is not always easy if you aren't familiar with it.

I'll see if I can work out this regex, it'll take some time (and a lot of trial and error). I'll post back if I get stuck. Thanks Kevin.

kthorngren · August 2017

But the PagingButton still looks like the default

I didn't save the change of removing that CSS from your page. Did you try removing it?

You will also notice that the font of the table data changes too.

two cells of two different columns to show up side by side

One option is to remove the column for H2 and render the data for H1 and H2 into one column using columns.render. However if you want two columns then maybe you need to use CSS to apply the cell borders. Looks like Semantic UI uses celled to apply cell borders. You can simply remove that then align H1 right and H2 left. I'm not well versed in CSS so won't be much help.

Kevin

hm123 · August 2017

I didn't save the change of removing that CSS from your page. Did you try removing it?

You will also notice that the font of the table data changes too.

I notice the font changes yes, but not the styling of PagingButton

Here's a saved jsfiddle with the body removed:

https://jsfiddle.net/hm123/256ogfje/2/

https://i.imgur.com/E0lqn6F_d.jpg?maxwidth=640&shape=thumb&fidelity=high

Here's how I want it to look:

http://jsfiddle.net/kmd1970/37enwegd/

https://i.imgur.com/S2x1Wpb_d.jpg?maxwidth=640&shape=thumb&fidelity=high

kthorngren · August 2017

Sorry, I thought you were referring to the paging info and buttons at the bottom of the table. The first image shows a square page length button. Is that the change you are looking for?

The page length option looks the same to me in both fiddles. I'm not really sure what you want and even if I was I probably wouldn't be much help. However this thread has some information on changing the Semantic UI layout. Not sure if anything has changed since but you can apply the defaults by adding the below into your Datatables initialization.

dom:
  "<'ui grid'"+
    "<'row'"+
      "<'eight wide column 'l>"+
      "<'right aligned eight wide column'f>"+
    ">"+
    "<'row dt-table'"+
      "<'sixteen wide column'tr>"+
    ">"+
    "<'row'"+
      "<'seven wide column'i>"+
      "<'right aligned nine wide column'p>"+
    ">"+
  ">",

You can use the dom to update the controls.

Kevin

hm123 · August 2017

Regarding regex, is it possible to configure a regex search in just one individual column?

allan · August 2017

Yes - columns().search().

Allan

How do I get semantic UI to work on my table

How do I get semantic UI to work on my table

Answers

Howdy, Stranger!

Categories

DataTables

How do I get semantic UI to work on my table

How do I get semantic UI to work on my table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables