DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Official version of Bulma theme for Datatables

Official version of Bulma theme for Datatables

marovargovcikmarovargovcik Posts: 2Questions: 1Answers: 0
in Free community support

Hey,

do you have any plans on creating Datatables theme based on Bulma CSS framework?
Foundation is supported officialy and is less popular than Bulma (27k vs 30k Github stars) so I think that Bulma does deserve some attention.

Also there are several unofficial packages but one with over 300 downloads per week.

Appreciate your answer and consideration.

Have a nice day!

«1

Answers

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    To be honest, its the first time I've heard of Bulma. So the short answer is no, currently I don't have any plans, but plans can chance! If there appears to be interest from the community, then yes, I would certainly consider doing it.

    Allan

  • marovargovcikmarovargovcik Posts: 2Questions: 1Answers: 0

    Thanks for answering Allan.

    Are there any chances that you would at least review my implementation and consider making it official? I am looking for a side project anyway and being contributor is big plus for a lot recruiters for some reason.

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Yes I'd be happy to take a look. Have you forks the DataTablesSrc repo, or done it some other way?

    Allan

  • shashankyshashanky Posts: 3Questions: 0Answers: 0

    I too am interested in knowing when we can get support for Bulma in datatables. Bulma being a pure CSS framework offers a good lightweight alternative to Bootstrap.

  • johnlewisdesignjohnlewisdesign Posts: 1Questions: 0Answers: 0

    Just registering interest too, seems pretty awesome compared to both Bootstrap and Foundation for a lot of reasons, most of them being how it just works. I reckon it might pick up some pace, worth a watch. I have a few DataTables/BS3 projects I'd convert if I could.

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Thanks. Looking at Bulma, it would be perfectly possible to do. I've added it to my feature request list. Can't say when it will be done though - if anyone else is interested, please comment :).

    Allan

  • rosiecakesrosiecakes Posts: 1Questions: 0Answers: 0

    very interested please! <3

  • mike92117mike92117 Posts: 40Questions: 12Answers: 1

    I had not heard of Bulma either until a few days ago. I've used Bootstrap and Foundation and now Bulma. The elegant simplicity of Bulma is what appeals to me and this is the perfect CSS framework for many projects.

    I also love the elegant simplicity of Datatables and I'm very, very interested in Datatables support of this framework. The sooner the better!

  • BusterenBusteren Posts: 52Questions: 17Answers: 4

    Just want to express my interest too! Think it would be very good to an official version :smile:

  • koli14koli14 Posts: 1Questions: 0Answers: 0

    +1

  • vrusuavrusua Posts: 1Questions: 0Answers: 0

    +1

  • mike92117mike92117 Posts: 40Questions: 12Answers: 1

    Any update on this Allen?

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    No sorry. We've had 8 votes on this in the last two years, so I'm sorry to say it isn't something we've been able to prioritize yet. I do like the look of Bulma and I think it would work nicely with DataTables.

    What we'll probably do first is a tech preview, similar to what we did for UIKit. That never got any feedback, so we didn't progress it further. I'll see if I can do that for the next DataTables release as hopefully it won't take too much work.

    Allan

  • mike92117mike92117 Posts: 40Questions: 12Answers: 1

    Thanks Allen!

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Hi,

    I've just committed a basic integration for DataTables and Bulma. This is what it looks like:

    I have to say, Bulma is really nice to work with!

    Hopefully we can get some feedback from the community and if it proves to be popular, or someone wishes to add support for the extensions, then we can look to get this added as fully supported.

    Allan

  • ayzayz Posts: 63Questions: 23Answers: 1

    I add my vote for Bulma!

  • yk2000yk2000 Posts: 1Questions: 0Answers: 0

    +1

  • koko82koko82 Posts: 12Questions: 2Answers: 0

    +1

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    I forgot to add a link to the example. It looks like there are some tweaks needed in the paging (possibly a conflict with my site's CSS).

    If anyone is interested in getting involved, the base stylesheet for DataTables with Bulma is here. We'd need to add similar ones for the other extensions (AutoFill, Buttons, etc).

    Allan

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    I've just committed a fix for that conflict. I use content as a class on this site, which conflicts with how Bulma is using that class - thread here.

    Allan

  • laynebaylaynebay Posts: 2Questions: 0Answers: 0

    +1
    Also needed a quick solution for a project, so I implemented something that works. AFAIK the tech preview example looks great, but is not fully baked. Here is what I did to get full Bulma UI going.

    $('#shipment-list').DataTable({
  'dom': '<"columns"<"column is-half"l><"column is-half"f>>t<"columns"<"column is-half"i><"column is-half is-pulled-right"p>>',
  'drawCallback': function () {
    $('#shipment-list_previous').addClass('pagination-previous');
    $('#shipment-list_previous a.disabled').attr('disabled');
    $('#shipment-list_next').addClass('pagination-next');
    $('#dataTables_paginate span a.paginate_button').addClass('pagination-link');
    $('.dataTables_paginate span').addClass('pagination-list');
    $('.dataTables_paginate span a').addClass('pagination-link');
    $('.dataTables_paginate span a.current').addClass('is-current');
    $('.dataTables_paginate span.ellipsis').addClass('pagination-ellipsis');
  }
});
$('.dataTables_length label select').wrap('<div class="select"></div>');
$('.dataTables_filter input').addClass('input');
$('#shipment-list_paginate').addClass('pagination is-centered');

    Hope this helps someone. Michael

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Hi Michael,

    Nice one - thanks! Are you willing to update our integration to add your changes? It looks like most of it is about the pagination (although not all).

    Allan

  • laynebaylaynebay Posts: 2Questions: 0Answers: 0

    Hi Allan,

    I'll have time to give it a shot in the next couple of weeks. Thanks for the encouragement ;-)

    Michael

  • david98david98 Posts: 1Questions: 0Answers: 0

    +1

  • barraclmbarraclm Posts: 9Questions: 0Answers: 0

    I would love to see a Bulma/DataTables integration.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Just a note to say Bulma is there for the core DataTables, see here - but needs to be added for the extensions.

    Colin

  • StompedStomped Posts: 3Questions: 0Answers: 0

    +1
    It would be really awesome to see the Bulma integration being released.

    I tried the tech preview and there where still some minor errors with the ordering icons of the columns. I removed them with the following css code:

    table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc, table.dataTable thead .sorting {
    background-image: none;
    }

    And the ellipsis buttons in the paging area are active causing an error when clicking them.

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    I tried the tech preview and there where still some minor errors with the ordering icons of the columns.

    I'm not seeing that in our preview example. Could you give me a link to the page showing the issue please?

    Thanks,
    Allan

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    Just a quick note to say that I've added support for Bulma in Buttons and Select. They will both be available in the nightly soon.

    Allan

  • StompedStomped Posts: 3Questions: 0Answers: 0

    My site is still under development and not yet public.
    This is the css causing it:
    table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png);
    }
    It's coming from:
    https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css

    If you cannot reproduce it I'll post again once the site is online.

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.