ETA on semantic ui styling :)

ETA on semantic ui styling :)

kmd1970kmd1970 Posts: 36Questions: 8Answers: 1
edited September 2015 in Free community support

Just wanted to inquire on when we might see an official Semantic UI style for Datatables :) or if you could enhance the one I submitted here:

https://datatables.net/forums/discussion/comment/78075/

A recent try:

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    As soon as I'm able to get the time to do it :-). It is nearing the top of my todo list.

    Allan

  • dts_sldts_sl Posts: 5Questions: 2Answers: 0

    @kmd1970 I'm anxious for a semantic-ui integration, too. I've looked at your demo (not the actual code) and was wondering if you feel there's stuff missing, or maybe not done right? Or something that prevents its usage? Or maybe you're just looking for something official? Just curious how you'd summarize the state of what you posted. Thanks!

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1

    @dts_sl

    Sadly, I am not a CSS, Javascript, Semantic UI or Datatables guru, but I am always trying to learn.

    The demo sample I posted amounts to just few hours of effort trying to duplicate what I saw in the Datatables Bootstrap styling example :

    https://www.datatables.net/examples/styling/bootstrap.html

    Allan is the Datatables expert, so I seek his input on the proper way to implement changes.

    I am currently using my Semantic ui / Datatables stylesheet for a company project and it seems to display properly so far.

    When I have more time, i will refine my work and include some JavaScript code to automatically add the dom: codes and classes into the paging toolbar, table and wrapper. Eventually I will switch to Allan's official version.

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1
    edited September 2015

    Fiddle js, css, html has been updated

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I have to say, it looks like a darn nice table the Semantic styled table. Nice work on the integration there.

    Allan

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1

    Thanks!

    I am working on a using your foundation and bootstrap examples to create a Datatables.semantic.js file so I can remove my dom: declaration.

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1
    edited September 2015

    Also, it looks even better with a font family and size change.

    1. Removed 'Lato' from all font-family: in semantic.css
    2. Changed font-size: from 14px to 12px in semantic.css.

    http://i.imgur.com/eiyBHCF.jpg

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1
    edited September 2015

    New and Improved!

    1. Removed all custom paging toolbar CSS to use built-in semantic UI menu and pagination classes. (less custom css!)
    2. Add JavaScript code for automatic DataTables / Semantic UI style integration (will be move to a Datatables.semantic.js file)
    3. remove dom from datatables initialisation.
    4. Added semantic ui pointer icons to buttons (will be made optional later)

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

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1
    1. Added to full_numbers_icon to pagingType

    This turns on the semantic ui pointer icons on buttons.

    var dtable = $('#example').DataTable({
         "pagingType": "full_numbers_icon"
    
    });
    

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

  • kmd1970kmd1970 Posts: 36Questions: 8Answers: 1

    Responsive example:

    Add unstackable class to the table to disable semantic ui table responsive adjustments.

    http://jsfiddle.net/kmd1970/1c5uvg0q/

This discussion has been closed.