Feature Request: Materialize CSS

boustanihani

I think it would be nice to have a materialized datatables styling option:
http://materializecss.com/

Also check: Feature Request: Semantic UI
https://datatables.net/forums/discussion/24163/feature-request-semantic-ui

filipeaclima

I have developed a SASS file for DataTables that styles it according to MaterializeCSS, i.e., it uses as much native MaterializeCSS design as possible on DataTables.

If you're interested (or anyone for that matter) I can post it here, or I can compile the SASS into CSS and post the CSS directives.

This file has some tweaks (positionings, margins, etc...) that I've made for my particular case, but anyone should spot this right on and change as necessary.

allan

Please do post it - would be very interesting to see what you have cooked up!

I've recently been doing a lot of work to make it easier to add theming options for DataTables such as this, while should be released in the next couple of weeks.

Allan

filipeaclima

So, what I've done is to NOT include the DataTables stylesheet in the header, and let MaterializeCSS do the work.

So if you're using SASS, create a file with the following:

\@charset "UTF-8";
\@mixin sort_bg {
    background-repeat: no-repeat;
    background-position: center right;
}
table.dataTable thead {
    & .sorting {
        \@include sort_bg;
        background-image: url("sort_both.png");
    }
    & .sorting_asc {
        \@include sort_bg;
        background-image: url("sort_asc.png");
    }
    & .sorting_desc {
        \@include sort_bg;
        background-image: url("sort_desc.png");
    }
    & .sorting_asc_disabled {
        \@include sort_bg;
        background-image: url("sort_asc_disabled.png");
    }
    & .sorting_desc_disabled {
        \@include sort_bg;
        background-image: url("sort_desc_disabled.png");
    }
}
.dataTables_wrapper {
    & .dataTables_filter {
        width: 30rem;
        \@extend .right;
        & i {
            font-size: 2rem;
            float: left;
            margin-right: .5rem;
        }
        & input {
            width: calc(100% - 7rem);
        }
        & .btn-floating {
            margin-right: .5rem;
        }
    }
    & .dataTables_info {
        font-size: .9rem;
        float: left;
    }
    & .dataTables_paginate {
        \@extend .right;
        padding-top: 0.25em;
        & a {
            margin: 0 .5rem;
        }
        & .paginate_button {
            \@extend .btn;
        }
        .paginate_button:hover {
            \@extend .btn:hover;
        }
        & .paginate_button.disabled,
        & .paginate_button.disabled:hover {
            \@extend .btn.disabled;
        }
    }
    & .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 40px;
        margin-left: -50%;
        margin-top: -25px;
        padding-top: 20px;
        text-align: center;
        font-size: 1.2em;
        background-color: white;
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    }
    &:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }
    \@media screen and (max-width: $small-screen) {
        & .dataTables_info,
        & .dataTables_paginate {
            float: none;
            text-align: center;
        }
        & .dataTables_paginate {
            margin-top: 0.5em;
        }
    }
    \@media screen and (max-width: $medium-screen) {
        & .dataTables_length,
        & .dataTables_filter {
            float: none;
            text-align: center;
        }
        & .dataTables_filter {
            margin-top: 0.5em;
        }
    }
}

Then import this file on your 'materialize.scss' using @import "<path_to_file>";, usually at the end (i.e. after the default MaterializeCSS components).

If on the other hand you prefer CSS, either add the code that follows to the MaterializeCSS file or create a CSS file and include it in the <header> of your page, after the MaterializeCSS file.

table.dataTable thead .sorting {
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("sort_both.png"); }
table.dataTable thead .sorting_asc {
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("sort_asc.png"); }
table.dataTable thead .sorting_desc {
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("sort_desc.png"); }
table.dataTable thead .sorting_asc_disabled {
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("sort_asc_disabled.png"); }
table.dataTable thead .sorting_desc_disabled {
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("sort_desc_disabled.png"); }

.dataTables_wrapper .dataTables_filter {
  width: 30rem; }
  .dataTables_wrapper .dataTables_filter i {
    font-size: 2rem;
    float: left;
    margin-right: .5rem; }
  .dataTables_wrapper .dataTables_filter input {
    width: calc(100% - 7rem); }
  .dataTables_wrapper .dataTables_filter .btn-floating {
    margin-right: .5rem; }
.dataTables_wrapper .dataTables_info {
  font-size: .9rem;
  float: left; }
.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.25em; }
  .dataTables_wrapper .dataTables_paginate a {
    margin: 0 .5rem; }
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 40px;
  margin-left: -50%;
  margin-top: -25px;
  padding-top: 20px;
  text-align: center;
  font-size: 1.2em;
  background-color: white;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); }
.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }
\@media screen and (max-width: 360px) {
  .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center; }
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em; } }
\@media screen and (max-width: 768px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center; }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em; } }

I should note that there are some elementes that I've excluded (.dataTables_length for example) because I don't use it on my case, but I guess that one can easily extend this.

If you prefer, I can "translate" the default design of DataTables into this, but I can only do it next weekend.

NOTE: Please replace all \@ directives with @ as this was done only for readable Markdown rendering

allan

I think letting the styling framework provide the styling feature is the correct thing to do and what I have done with the Bootstrap and Foundation styling options.

Thanks for posting this - I'm sure others will enjoy using it!

Allan

kmd1970

I've been playing with the semantic ui css framework. http://semantic-ui.com

NOTE: you will need jquery, DataTables and semantic ui .css and .js files loaded for this to work.

Here is a sample (please note: I suck at css):

The HTML

<table id="example" class="ui compact selectable striped celled table raised segment" >
  <thead>
    <tr >
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>

( If you can get the length, search, paging and info divs to float (left|right) properly you probably don't need to use dom:)

$('#example').DataTable({
     "pagingType": "full_numbers",
     dom:
        "<'ui two column grid'<'left aligned column'l><'right aligned column'f>>" +
        "<'ui grid'<'column'tr>>" +
        "<'ui two column grid'<'left aligned column'i><'right aligned column'p>>" 
 });

The CSS

.ui.table.dataTable thead th
{
    border-left: 1px solid rgba(34, 36, 38, 0.15);
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    white-space: nowrap;
}
.ui.table.dataTable thead th:first-child
{
    border-left: none;
}
.ui.table.dataTable thead .sorting,
.ui.table.dataTable thead .sorting_asc ,
.ui.table.dataTable thead .sorting_desc ,
.ui.table.dataTable thead .sorting_asc_disabled ,
.ui.table.dataTable thead .sorting_desc_disabled,
.ui.table.dataTable thead .sorting:hover,
.ui.table.dataTable thead .sorting_asc:hover ,
.ui.table.dataTable thead .sorting_desc:hover ,
.ui.table.dataTable thead .sorting_asc_disabled:hover ,
.ui.table.dataTable thead .sorting_desc_disabled:hover
{
    moz-user-select: none;
    ms-user-select: none;
    user-select: none;
    webkit-user-select: none;
}
.ui.table.dataTable thead th:after
{
    content: '';
    display: none;
    font-family: 'Icons';
    font-style: normal;
    font-weight: normal;
    height: 1em;
    margin: 0em 0em 0em 0.5em;
    opacity: 0.8;
    text-decoration: inherit;
    width: auto;
}
.ui.table.dataTable thead th.sorting_asc:after
{
    content: '\f160';
}
.ui.table.dataTable thead th.sorting_desc:after
{
    content: '\f161';
}
.ui.table.dataTable th.disabled:hover
{
    color: rgba(40, 40, 40, 0.3);
    cursor: auto;
}
.ui.table.dataTable thead th:hover
{
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.8);
}
.ui.table.dataTable thead .sorting_asc ,
.ui.table.dataTable thead .sorting_desc ,
.ui.table.dataTable thead .sorting_asc_disabled ,
.ui.table.dataTable thead .sorting_desc_disabled
{
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
}
.ui.table.dataTable thead .sorting_asc:after ,
.ui.table.dataTable thead .sorting_desc:after ,
.ui.table.dataTable thead .sorting_asc_disabled:after ,
.ui.table.dataTable thead .sorting_desc_disabled:after
{
    display: inline-block;
}
.ui.table.dataTable thead .sorting_asc:hover ,
.ui.table.dataTable thead .sorting_desc:hover ,
.ui.table.dataTable thead .sorting_asc_disabled:hover ,
.ui.table.dataTable thead .sorting_desc_disabled:hover
{
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
}
.dataTables_length select
{
    background:#ffffff none repeat scroll 0 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 0.285714rem;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    display: inline-block;
    line-height: 1.2142em;
    min-height: 0.714286em;
    outline: 0 none;
    padding: 0.3em;
    transform: rotateZ(0deg);
    transition: box-shadow 0.1s ease 0s, width 0.1s ease 0s;
    white-space: normal;
    word-wrap: break-word;
}
.dataTables_wrapper .dataTables_filter
{
    color: rgba(0, 0, 0, 0.87);
    display: inline-flex;
    position: relative;
    text-align: right;
}
.dataTables_wrapper .dataTables_filter input
{
    margin-left: 0.5em;
}
.dataTables_wrapper .dataTables_info
{
    clear: both;
    padding-top: 0.755em;
}
.dataTables_paginate:after
{
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
.dataTables_paginate
{
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}
.dataTables_paginate:last-child
{
    margin-bottom: 0;
}
.dataTables_paginate:first-child
{
    margin-top: 0;
}
.dataTables_paginate
{
    font-size: 1rem;
}
.dataTables_paginate
{
    background:#ffffff none repeat scroll 0 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 0.285714rem;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
    font-family: Lato,"Helvetica Neue",Arial,Helvetica,sans-serif;
    font-weight: 400;
    margin: 1rem 0;
    min-height: 2.85714em;
}
.dataTables_paginate .paginate_button:before
{
    background: rgba(34, 36, 38, 0.1) none repeat scroll 0 0;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
}
.dataTables_paginate .paginate_button
{
    min-width: 3em;
    text-align: center;
}
.dataTables_paginate .paginate_button .disabled, .ui.paginate_button .paginate_button .disabled:hover
{
    background-color: transparent !important;
    color: rgba(40, 40, 40, 0.3);
    cursor: default;
}
.dataTables_paginate .paginate_button
{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
    line-height: 1;
    moz-user-select: none;
    padding: 0.928571em 1.14286em;
    position: relative;
    text-decoration: none;
    text-transform: none;
    transition: background 0.1s ease 0s, box-shadow 0.1s ease 0s, color 0.1s ease 0s;
    vertical-align: middle;
}
.dataTables_paginate span
{
    display: inherit;
}
.dataTables_paginate > .paginate_button:last-child
{
    border-radius: 0 0.285714rem 0.285714rem 0;
}
.dataTables_paginate > .paginate_button:last-child:before
{
    display: none;
}
.dataTables_paginate .paginate_button
{
    min-width: 3em;
    text-align: center;
}
.dataTables_paginate.icon.paginate_button i.icon
{
    vertical-align: top;
}
.dataTables_paginate .current.paginate_button
{
    background-color: rgba(0, 0, 0, 0.05);
    border-top: medium none;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.95);
    padding-top: 0.928571em;
}
.dataTables_paginate .paginate_button.disabled, .dataTables_paginate .paginate_button.disabled:hover
{
    background-color: transparent !important;
    color: rgba(40, 40, 40, 0.3);
    cursor: default;
}
.dataTables_paginate a.paginate_button:hover
{
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}
.dataTables_filter input
{
    background:#ffffff none repeat scroll 0 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 0.285714rem;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
    flex: 1 0 auto;
    font-family: Lato,"Helvetica Neue",Arial,Helvetica,sans-serif;
    height:1em;
        margin: 0;
        max-width: 100%;
        outline: 0 none;
        padding: .4em;
    text-align: left;
    transition: background-color 0.1s ease 0s, box-shadow 0.1s ease 0s, border-color 0.1s ease 0s;
}

allan

Very nice - thanks for posting this :-)

I'm thinking Semantic is going to be the next integration for DataTables and its extensions.

Allan

kmd1970

Sweet!

abd_shouman

@kmd1970
Thanks a lot that was helpful.

You made me register to just thank you !

IsmailM

Take a look at http://codepen.io/azamatms/pen/ZGwOMM/ by Azamat Mukhiddinov.

He has properly extended data tables for Materialize.

Simply put, it’s amazing...

allan

I recently committed initial support for Material Design (using MDL) into DataTables core. Feedback and PRs with improvements welcome!

Allan

elliotholden

Hi @allan I would like to know how to use the support for Material Design that you built into DataTables core. I'm kind of new to all this so I'm not sure if I'm in the right place but this is what I'm using in my project from the Material website http://materializecss.com/:

materialize.min.js
materialize.min.css

Then form Datatables website I'm using:

jquery-2.2.1.min.js
jquery.dataTables.min.js
datatables.min.css

In my project I noticed the "Show entries" select options are not showing. Just wondering if the files I'm using is everything I need to make DataTables work with http://materializecss.com/ framework?

Thanks

E.

allan

datatables.min.css

Remove that. If it still doesn't work well, please link to the page so I can take a look.

Allan

BoSmith

Hi Allan,
I have been working with Materialize and reading through the comments above. Is there a definitive example on using the Materialize CSS Frramework?
I have tried many combinations of CSS and JS includes but my main problem is that I cannot get the Select Input to work in the Editor Dialog.
Thanks as always,
Bo

allan

I'm afraid not. The integrations available for DataTables are linked here.

Allan

marcusaaronb

How to include matrializecss in new version design?? because the show entry not function... also the search has a. wrong place. thank you

marcusaaronb

Please give me materializecss.css files for support the datatables thank you

allan

There is no materialize integration for DataTables. You are welcome to create one and share it with everyone though!

There is a MDL integration available.

Allan