CODEWITHSUNDEEP
javascripttwitter-bootstrapmaterial-design
Joe
Joe

Reputation: 4254

Using ng-table in AngularJS Material

I want to use this table in my material design angularjs app: http://ng-table.com/#/

The problem is it requires bootstrap. It probably isn't a good idea to have two CSS frameworks.

Is it possible to somehow extract the needed CSS for the ng-table and to isolate it to an id? So it won't effect anything else in my app.

It's very sad no one has made a decent table for material (md-table isn't enough).

Upvotes: 0

Views: 955

Answers (1)

quirimmo
quirimmo

Reputation: 9988

Sure you can. Here the CSS code used by the library: 

.ng-table th {
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.ng-table th.sortable {
    cursor: pointer
}
.ng-table th.sortable .sort-indicator {
    padding-right: 18px;
    position: relative
}
.ng-table th.sortable .sort-indicator:after,
.ng-table th.sortable .sort-indicator:before {
    content: "";
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #000 transparent;
    visibility: visible;
    right: 5px;
    top: 50%;
    position: absolute;
    opacity: .3;
    margin-top: -4px
}
.ng-table th.sortable .sort-indicator:before {
    margin-top: 2px;
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000
}
.ng-table th.sortable .sort-indicator:hover:after,
.ng-table th.sortable .sort-indicator:hover:before {
    opacity: 1;
    visibility: visible
}
.ng-table th.sortable.sort-asc,
.ng-table th.sortable.sort-desc {
    background-color: rgba(141, 192, 219, .25);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .75)
}
.ng-table th.sortable.sort-asc .sort-indicator:after,
.ng-table th.sortable.sort-desc .sort-indicator:after {
    margin-top: -2px
}
.ng-table th.sortable.sort-asc .sort-indicator:before,
.ng-table th.sortable.sort-desc .sort-indicator:before {
    visibility: hidden
}
.ng-table th.sortable.sort-asc .sort-indicator:after,
.ng-table th.sortable.sort-asc .sort-indicator:hover:after,
.ng-table th.sortable.sort-desc .sort-indicator:after {
    visibility: visible;
    filter: alpha(opacity=60);
    -khtml-opacity: .6;
    -moz-opacity: .6;
    opacity: .6
}
.ng-table th.sortable.sort-desc .sort-indicator:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    box-shadow: none
}
.ng-table th.filter .input-filter {
    margin: 0;
    display: block;
    width: 100%;
    min-height: 30px;
    box-sizing: border-box
}
.ng-table .ng-table-group-header th {
    text-align: left
}
.ng-table .ng-table-group-selector {
    display: block
}
.ng-table .ng-table-group-close,
.ng-table .ng-table-group-toggle {
    float: right
}
.ng-table .ng-table-group-toggle {
    margin-right: 5px
}
@media only screen and (max-width: 800px) {
    .ng-table-responsive {
        border-bottom: 1px solid #999
    }
    .ng-table-responsive tr {
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        border-right: 1px solid #999
    }
    .ng-table-responsive td:before {
        position: absolute;
        padding: 8px;
        left: 0;
        top: 0;
        width: 50%;
        white-space: nowrap;
        text-align: left;
        font-weight: 700
    }
    .ng-table-responsive thead tr th {
        text-align: left
    }
    .ng-table-responsive thead tr.ng-table-filters th {
        padding: 0
    }
    .ng-table-responsive thead tr.ng-table-filters th form>div {
        padding: 8px
    }
    .ng-table-responsive td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left
    }
    .ng-table-responsive td:before {
        content: attr(data-title-text)
    }
    .ng-table-responsive,
    .ng-table-responsive tbody,
    .ng-table-responsive td,
    .ng-table-responsive th,
    .ng-table-responsive thead,
    .ng-table-responsive tr {
        display: block
    }
}
.ng-table-pagination {
    margin-top: 0
}
.filter:after,
.filter:before,
.ng-table-group-selector:after,
.ng-table-group-selector:before {
    display: table;
    content: " "
}
.filter:after,
.ng-table-group-selector:after {
    clear: both
}
.filter>.filter-cell {
    float: left;
    box-sizing: border-box
}
.filter-horizontal>.filter-cell {
    padding: 0 2px
}
.filter-horizontal>.filter-cell:first-child {
    padding-left: 0
}
.filter-horizontal>.filter-cell.last,
.filter-horizontal>.filter-cell:last-child {
    padding-right: 0
}
.s12 {
    width: 100%
}
.s11 {
    width: 91.66666666666666%
}
.s10 {
    width: 83.33333333333334%
}
.s9 {
    width: 75%
}
.s8 {
    width: 66.66666666666666%
}
.s7 {
    width: 58.333333333333336%
}
.s6 {
    width: 50%
}
.s5 {
    width: 41.66666666666667%
}
.s4 {
    width: 33.33333333333333%
}
.s3 {
    width: 25%
}
.s2 {
    width: 16.666666666666664%
}
.s1 {
    width: 8.333333333333332%
}
@media all and (max-width: 468px) {
    .s1,
    .s2,
    .s3,
    .s4,
    .s5,
    .s6,
    .s7,
    .s8,
    .s9,
    .s10,
    .s11,
    .s12 {
        width: 100%
    }
    .filter>.filter-cell {
        padding: 0
    }
}

Put a custom class when you include your HTML of the table (like for example: my-ng-table) and find and replace inside the CSS code above all the occurrences of .ng-table with my-ng-table.

Then all the block of codes where you see .s1 .s2 etc, transform them in my-ng-table .s1 etc etc (in order to ensure that this will affect only the classes inside your table.

You may need to wrap in the same way also the classes filter, but I don't think it will create any conflict if you leave it in that way.

And it should work just for your tables without any conflict.

I hope it helps

Upvotes: 1

Related Questions