Interactive data table with Angular and SCSS
How do I make an interactive data table with angular and scss?
Experimenting with custom table creation and features using angularjs and scss.Feedback welcome : ). What is a interactive data table with angular and scss? How do you make a interactive data table with angular and scss? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
Interactive data table with Angular and SCSS Previews
Interactive data table with Angular and SCSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive data table with Angular and SCSS</title> <link href='https://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/hint.css/1.3.6/hint.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="app" ng-app="angularPageApp" ng-controller="easyTableCtrl" ng-class="getColorPresetClassName()"> <div class="page-banner" >An interactive data table solution with Angular and SCSS</div> <div class="page-banner sub">Fixed headers · Row controls · Inline View & Edit Panels · Color Presets · Help Menu</div> <div ng-click="onClickAway($event)" class="table-container"> <easy-color-presets></easy-color-presets> <easy-help-popout></easy-help-popout> <div class="app-container"> <easy-table></easy-table> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Interactive data table with Angular and SCSS - Script Codes CSS Codes
*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Merriweather Sans', sans-serif; margin: 0; padding: 0;
}
.flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;
}
.flex-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.flex-column { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.app.color-preset-1 .page-banner { background-color: #941C2F;
}
.app.color-preset-1 .color-presets.open .preset-toggle { color: #941C2F;
}
.app.color-preset-1 .color-presets:not(.open) .preset-toggle:hover { color: #941C2F;
}
.app.color-preset-1 .help-popout.open .help-toggle { color: #941C2F;
}
.app.color-preset-1 .help-popout:not(.open) .help-toggle:hover { color: #941C2F;
}
.app.color-preset-1 .help-popout .help-items { background-color: #f6d2d8; border-color: #941C2F;
}
.app.color-preset-1 .help-popout .help-items .help-item span { color: #941C2F;
}
.app.color-preset-1 .help-popout .help-items .help-item .help-item-number { background-color: #941C2F; color: #f6d2d8;
}
.app.color-preset-1 .expando-table .expando-header { border-color: #941C2F;
}
.app.color-preset-1 .expando-table .header-cell { background-color: #941C2F;
}
.app.color-preset-1 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #f6d2d8;
}
.app.color-preset-1 .expando-table .expando-view .expando-row, .app.color-preset-1 .expando-table .expando-edit .expando-row { border-bottom-color: #de5168;
}
.app.color-preset-1 .expando-table .expando-view .close-view, .app.color-preset-1 .expando-table .expando-view .close-edit, .app.color-preset-1 .expando-table .expando-view .open-view, .app.color-preset-1 .expando-table .expando-view .open-edit, .app.color-preset-1 .expando-table .expando-edit .close-view, .app.color-preset-1 .expando-table .expando-edit .close-edit, .app.color-preset-1 .expando-table .expando-edit .open-view, .app.color-preset-1 .expando-table .expando-edit .open-edit { border-color: #941C2F;
}
.app.color-preset-1 .expando-table .expando-view .close-view:hover, .app.color-preset-1 .expando-table .expando-view .close-edit:hover, .app.color-preset-1 .expando-table .expando-view .open-view:hover, .app.color-preset-1 .expando-table .expando-view .open-edit:hover, .app.color-preset-1 .expando-table .expando-edit .close-view:hover, .app.color-preset-1 .expando-table .expando-edit .close-edit:hover, .app.color-preset-1 .expando-table .expando-edit .open-view:hover, .app.color-preset-1 .expando-table .expando-edit .open-edit:hover { color: #bf243d;
}
.app.color-preset-2 .page-banner { background-color: #2B4162;
}
.app.color-preset-2 .color-presets.open .preset-toggle { color: #2B4162;
}
.app.color-preset-2 .color-presets:not(.open) .preset-toggle:hover { color: #2B4162;
}
.app.color-preset-2 .help-popout.open .help-toggle { color: #2B4162;
}
.app.color-preset-2 .help-popout:not(.open) .help-toggle:hover { color: #2B4162;
}
.app.color-preset-2 .help-popout .help-items { background-color: #c1cfe4; border-color: #2B4162;
}
.app.color-preset-2 .help-popout .help-items .help-item span { color: #2B4162;
}
.app.color-preset-2 .help-popout .help-items .help-item .help-item-number { background-color: #2B4162; color: #c1cfe4;
}
.app.color-preset-2 .expando-table .expando-header { border-color: #2B4162;
}
.app.color-preset-2 .expando-table .header-cell { background-color: #2B4162;
}
.app.color-preset-2 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #c1cfe4;
}
.app.color-preset-2 .expando-table .expando-view .expando-row, .app.color-preset-2 .expando-table .expando-edit .expando-row { border-bottom-color: #577db5;
}
.app.color-preset-2 .expando-table .expando-view .close-view, .app.color-preset-2 .expando-table .expando-view .close-edit, .app.color-preset-2 .expando-table .expando-view .open-view, .app.color-preset-2 .expando-table .expando-view .open-edit, .app.color-preset-2 .expando-table .expando-edit .close-view, .app.color-preset-2 .expando-table .expando-edit .close-edit, .app.color-preset-2 .expando-table .expando-edit .open-view, .app.color-preset-2 .expando-table .expando-edit .open-edit { border-color: #2B4162;
}
.app.color-preset-2 .expando-table .expando-view .close-view:hover, .app.color-preset-2 .expando-table .expando-view .close-edit:hover, .app.color-preset-2 .expando-table .expando-view .open-view:hover, .app.color-preset-2 .expando-table .expando-view .open-edit:hover, .app.color-preset-2 .expando-table .expando-edit .close-view:hover, .app.color-preset-2 .expando-table .expando-edit .close-edit:hover, .app.color-preset-2 .expando-table .expando-edit .open-view:hover, .app.color-preset-2 .expando-table .expando-edit .open-edit:hover { color: #3b5985;
}
.app.color-preset-3 .page-banner { background-color: #00B563;
}
.app.color-preset-3 .color-presets.open .preset-toggle { color: #00B563;
}
.app.color-preset-3 .color-presets:not(.open) .preset-toggle:hover { color: #00B563;
}
.app.color-preset-3 .help-popout.open .help-toggle { color: #00B563;
}
.app.color-preset-3 .help-popout:not(.open) .help-toggle:hover { color: #00B563;
}
.app.color-preset-3 .help-popout .help-items { background-color: #cfffe9; border-color: #00B563;
}
.app.color-preset-3 .help-popout .help-items .help-item span { color: #00B563;
}
.app.color-preset-3 .help-popout .help-items .help-item .help-item-number { background-color: #00B563; color: #cfffe9;
}
.app.color-preset-3 .expando-table .expando-header { border-color: #00B563;
}
.app.color-preset-3 .expando-table .header-cell { background-color: #00B563;
}
.app.color-preset-3 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #cfffe9;
}
.app.color-preset-3 .expando-table .expando-view .expando-row, .app.color-preset-3 .expando-table .expando-edit .expando-row { border-bottom-color: #36ffa4;
}
.app.color-preset-3 .expando-table .expando-view .close-view, .app.color-preset-3 .expando-table .expando-view .close-edit, .app.color-preset-3 .expando-table .expando-view .open-view, .app.color-preset-3 .expando-table .expando-view .open-edit, .app.color-preset-3 .expando-table .expando-edit .close-view, .app.color-preset-3 .expando-table .expando-edit .close-edit, .app.color-preset-3 .expando-table .expando-edit .open-view, .app.color-preset-3 .expando-table .expando-edit .open-edit { border-color: #00B563;
}
.app.color-preset-3 .expando-table .expando-view .close-view:hover, .app.color-preset-3 .expando-table .expando-view .close-edit:hover, .app.color-preset-3 .expando-table .expando-view .open-view:hover, .app.color-preset-3 .expando-table .expando-view .open-edit:hover, .app.color-preset-3 .expando-table .expando-edit .close-view:hover, .app.color-preset-3 .expando-table .expando-edit .close-edit:hover, .app.color-preset-3 .expando-table .expando-edit .open-view:hover, .app.color-preset-3 .expando-table .expando-edit .open-edit:hover { color: #00e87f;
}
.app.color-preset-4 .page-banner { background-color: #D63300;
}
.app.color-preset-4 .color-presets.open .preset-toggle { color: #D63300;
}
.app.color-preset-4 .color-presets:not(.open) .preset-toggle:hover { color: #D63300;
}
.app.color-preset-4 .help-popout.open .help-toggle { color: #D63300;
}
.app.color-preset-4 .help-popout:not(.open) .help-toggle:hover { color: #D63300;
}
.app.color-preset-4 .help-popout .help-items { background-color: #ffe0d6; border-color: #D63300;
}
.app.color-preset-4 .help-popout .help-items .help-item span { color: #D63300;
}
.app.color-preset-4 .help-popout .help-items .help-item .help-item-number { background-color: #D63300; color: #ffe0d6;
}
.app.color-preset-4 .expando-table .expando-header { border-color: #D63300;
}
.app.color-preset-4 .expando-table .header-cell { background-color: #D63300;
}
.app.color-preset-4 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #ffe0d6;
}
.app.color-preset-4 .expando-table .expando-view .expando-row, .app.color-preset-4 .expando-table .expando-edit .expando-row { border-bottom-color: #ff7f57;
}
.app.color-preset-4 .expando-table .expando-view .close-view, .app.color-preset-4 .expando-table .expando-view .close-edit, .app.color-preset-4 .expando-table .expando-view .open-view, .app.color-preset-4 .expando-table .expando-view .open-edit, .app.color-preset-4 .expando-table .expando-edit .close-view, .app.color-preset-4 .expando-table .expando-edit .close-edit, .app.color-preset-4 .expando-table .expando-edit .open-view, .app.color-preset-4 .expando-table .expando-edit .open-edit { border-color: #D63300;
}
.app.color-preset-4 .expando-table .expando-view .close-view:hover, .app.color-preset-4 .expando-table .expando-view .close-edit:hover, .app.color-preset-4 .expando-table .expando-view .open-view:hover, .app.color-preset-4 .expando-table .expando-view .open-edit:hover, .app.color-preset-4 .expando-table .expando-edit .close-view:hover, .app.color-preset-4 .expando-table .expando-edit .close-edit:hover, .app.color-preset-4 .expando-table .expando-edit .open-view:hover, .app.color-preset-4 .expando-table .expando-edit .open-edit:hover { color: #ff440a;
}
.app.color-preset-5 .page-banner { background-color: #E31044;
}
.app.color-preset-5 .color-presets.open .preset-toggle { color: #E31044;
}
.app.color-preset-5 .color-presets:not(.open) .preset-toggle:hover { color: #E31044;
}
.app.color-preset-5 .help-popout.open .help-toggle { color: #E31044;
}
.app.color-preset-5 .help-popout:not(.open) .help-toggle:hover { color: #E31044;
}
.app.color-preset-5 .help-popout .help-items { background-color: #fddce4; border-color: #E31044;
}
.app.color-preset-5 .help-popout .help-items .help-item span { color: #E31044;
}
.app.color-preset-5 .help-popout .help-items .help-item .help-item-number { background-color: #E31044; color: #fddce4;
}
.app.color-preset-5 .expando-table .expando-header { border-color: #E31044;
}
.app.color-preset-5 .expando-table .header-cell { background-color: #E31044;
}
.app.color-preset-5 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #fddce4;
}
.app.color-preset-5 .expando-table .expando-view .expando-row, .app.color-preset-5 .expando-table .expando-edit .expando-row { border-bottom-color: #f67d9b;
}
.app.color-preset-5 .expando-table .expando-view .close-view, .app.color-preset-5 .expando-table .expando-view .close-edit, .app.color-preset-5 .expando-table .expando-view .open-view, .app.color-preset-5 .expando-table .expando-view .open-edit, .app.color-preset-5 .expando-table .expando-edit .close-view, .app.color-preset-5 .expando-table .expando-edit .close-edit, .app.color-preset-5 .expando-table .expando-edit .open-view, .app.color-preset-5 .expando-table .expando-edit .open-edit { border-color: #E31044;
}
.app.color-preset-5 .expando-table .expando-view .close-view:hover, .app.color-preset-5 .expando-table .expando-view .close-edit:hover, .app.color-preset-5 .expando-table .expando-view .open-view:hover, .app.color-preset-5 .expando-table .expando-view .open-edit:hover, .app.color-preset-5 .expando-table .expando-edit .close-view:hover, .app.color-preset-5 .expando-table .expando-edit .close-edit:hover, .app.color-preset-5 .expando-table .expando-edit .open-view:hover, .app.color-preset-5 .expando-table .expando-edit .open-edit:hover { color: #f13563;
}
.app.color-preset-6 .page-banner { background-color: #2B303A;
}
.app.color-preset-6 .color-presets.open .preset-toggle { color: #2B303A;
}
.app.color-preset-6 .color-presets:not(.open) .preset-toggle:hover { color: #2B303A;
}
.app.color-preset-6 .help-popout.open .help-toggle { color: #2B303A;
}
.app.color-preset-6 .help-popout:not(.open) .help-toggle:hover { color: #2B303A;
}
.app.color-preset-6 .help-popout .help-items { background-color: #e1e4e9; border-color: #2B303A;
}
.app.color-preset-6 .help-popout .help-items .help-item span { color: #2B303A;
}
.app.color-preset-6 .help-popout .help-items .help-item .help-item-number { background-color: #2B303A; color: #e1e4e9;
}
.app.color-preset-6 .expando-table .expando-header { border-color: #2B303A;
}
.app.color-preset-6 .expando-table .header-cell { background-color: #2B303A;
}
.app.color-preset-6 .expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: #e1e4e9;
}
.app.color-preset-6 .expando-table .expando-view .expando-row, .app.color-preset-6 .expando-table .expando-edit .expando-row { border-bottom-color: #616d83;
}
.app.color-preset-6 .expando-table .expando-view .close-view, .app.color-preset-6 .expando-table .expando-view .close-edit, .app.color-preset-6 .expando-table .expando-view .open-view, .app.color-preset-6 .expando-table .expando-view .open-edit, .app.color-preset-6 .expando-table .expando-edit .close-view, .app.color-preset-6 .expando-table .expando-edit .close-edit, .app.color-preset-6 .expando-table .expando-edit .open-view, .app.color-preset-6 .expando-table .expando-edit .open-edit { border-color: #2B303A;
}
.app.color-preset-6 .expando-table .expando-view .close-view:hover, .app.color-preset-6 .expando-table .expando-view .close-edit:hover, .app.color-preset-6 .expando-table .expando-view .open-view:hover, .app.color-preset-6 .expando-table .expando-view .open-edit:hover, .app.color-preset-6 .expando-table .expando-edit .close-view:hover, .app.color-preset-6 .expando-table .expando-edit .close-edit:hover, .app.color-preset-6 .expando-table .expando-edit .open-view:hover, .app.color-preset-6 .expando-table .expando-edit .open-edit:hover { color: #414857;
}
.page-banner { padding-top: 1em; text-align: center; color: white;
}
.page-banner.sub { padding: 0.5em; font-size: 0.7em;
}
.table-container { position: relative; padding: 3em 5vw 5vh 5vw; background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/hoffman.png);
}
.color-presets { position: absolute; top: 0; left: 5vw; font-size: 1.6em;
}
.color-presets.open .color-preset { visibility: visible;
}
.color-presets.open .preset-toggle::before, .color-presets.open .preset-toggle::after { display: none;
}
.color-presets .color-preset { visibility: hidden; padding: 0.3em 0.1em; transition: transform 0.1s linear; cursor: pointer;
}
.color-presets .color-preset .color-box { height: 1em; width: 1em;
}
.color-presets .color-preset .color-box:hover { transform: scale(1.1); box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
}
.color-presets .preset-toggle { padding: 0.1em; font-size: 0.8em; cursor: pointer;
}
.help-popout { position: absolute; top: 0; right: 5vw; font-size: 1.6em;
}
.help-popout.open .help-items { display: block; width: 500px; height: auto;
}
.help-popout.open .help-toggle::before, .help-popout.open .help-toggle::after { display: none;
}
.help-popout .help-items { position: absolute; display: none; z-index: 20; width: 0; height: 0; top: 3.4em; right: 1.3em; font-size: 0.5em; background-color: white; border: 0.1em solid black; box-shadow: -0.2em 0.3em 0.5em rgba(0, 0, 0, 0.8); overflow: hidden;
}
.help-popout .help-item { cursor: default;
}
.help-popout .help-item:hover { background-color: ghostwhite; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6);
}
.help-popout .help-item .help-item-number { display: inline-block; padding: 1em 0 1em 0.5em; margin-right: 0.2em; width: 1.7em; background-color: #941C2F; color: #f6d2d8;
}
.help-popout .help-item .help-box { display: inline-block; padding: 1em;
}
.help-popout .help-item .help-box span { font-weight: bold;
}
.help-popout .help-toggle { padding: 0.1em; font-size: 0.8em; cursor: pointer;
}
.expando-table { position: relative; width: 100%; overflow-y: scroll; overflow-x: hidden; max-height: 82.5vh; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8);
}
.expando-table .expando-header { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; z-index: 5; background-color: white; width: 90vw; padding: 0.2em; text-align: center; border-bottom: 0.1em solid black; box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.8);
}
.expando-table .expando-header .header-cell { flex-grow: 1; margin: 0.2em; padding: 0.2em; font-size: 0.9em; color: white; text-transform: uppercase;
}
.expando-table .expando-rows { padding-top: 3em; font-size: 0.8em; color: #161925;
}
.expando-table .expando-row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; text-align: center; transition: transform 0.1s linear; cursor: pointer; border-bottom: 0.2em solid black; background-color: white; padding: 0.1em 0 0.1em 0;
}
.expando-table .expando-row:not(.no-scale):nth-of-type(odd) { background-color: white;
}
.expando-table .expando-row:not(.showUI):hover .click-indicator { left: 3em;
}
.expando-table .expando-row:hover:not(.no-scale), .expando-table .expando-row.showUI:not(.no-scale) { transform: scale(1.05); padding: 0 1.5em 0 1.5em;
}
.expando-table .expando-row:hover .data-cell, .expando-table .expando-row.showUI .data-cell { padding-top: 0.5em;
}
.expando-table .expando-row:hover .data-cell:nth-of-type(3), .expando-table .expando-row.showUI .data-cell:nth-of-type(3) { padding-bottom: 0.5em;
}
.expando-table .expando-row.showUI .popout-ui { position: relative; left: 0;
}
.expando-table .expando-row .click-indicator { position: absolute; z-index: 3; left: -5em; top: 0.45em; opacity: 0.2; transition: left 0.1s linear;
}
.expando-table .expando-row .data-cell { flex-grow: 1; transition: all 0.1s linear;
}
.expando-table .expando-row .popout-ui { position: absolute; transition: all 0.1s linear; width: 150px; top: -0.1em; left: -150px;
}
.expando-table .expando-row .popout-ui .row-actions { font-size: 1.5em; margin-left: 1em; padding-top: 0.2em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action { flex-grow: 1; text-align: center; transition: all 0.1s linear;
}
.expando-table .expando-row .popout-ui .row-actions .row-action:hover { margin-top: -0.1em; font-size: 1.1em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action:hover::after { bottom: 95%;
}
.expando-table .expando-row .popout-ui .row-actions .row-action:hover.view { color: #0088CE;
}
.expando-table .expando-row .popout-ui .row-actions .row-action:hover.edit { color: #5E747F;
}
.expando-table .expando-row .popout-ui .row-actions .row-action:hover.delete { color: #D45269;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.hint--bottom::after { bottom: auto;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.view::before { left: 0.8em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.view::after { left: 1.3em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.edit::before { left: 0.6em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.edit::after { left: 1.25em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.delete::before { left: 0.75em;
}
.expando-table .expando-row .popout-ui .row-actions .row-action.delete::after { left: 0.9em;
}
.expando-table .expando-view,
.expando-table .expando-edit { visibility: hidden; position: absolute; transition: all 0.4s linear; z-index: 13; width: 100%; height: 100%; top: 2.3em; left: -200vw; background-color: white; box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
}
.expando-table .expando-view .expando-row,
.expando-table .expando-edit .expando-row { padding-bottom: 0.2em; border-bottom-color: black;
}
.expando-table .expando-view .expando-row .data-cell,
.expando-table .expando-edit .expando-row .data-cell { padding-top: 0.5em; padding-bottom: 0.5em;
}
.expando-table .expando-view .expando-row .close-view,
.expando-table .expando-view .expando-row .close-edit,
.expando-table .expando-edit .expando-row .close-view,
.expando-table .expando-edit .expando-row .close-edit { position: absolute; width: 2.4em; height: 2.4em; line-height: 2.2em; font-size: 1.1em; border: 0.2em solid black; top: 2.6em; left: 0.3em; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8);
}
.expando-table .expando-view .expando-row .close-view:hover,
.expando-table .expando-view .expando-row .close-edit:hover,
.expando-table .expando-edit .expando-row .close-view:hover,
.expando-table .expando-edit .expando-row .close-edit:hover { color: black;
}
.expando-table .expando-view .expando-row .close-view:hover i,
.expando-table .expando-view .expando-row .close-edit:hover i,
.expando-table .expando-edit .expando-row .close-view:hover i,
.expando-table .expando-edit .expando-row .close-edit:hover i { transform: scale(1.3);
}
.expando-table .expando-view .expando-row .open-view,
.expando-table .expando-view .expando-row .open-edit,
.expando-table .expando-edit .expando-row .open-view,
.expando-table .expando-edit .expando-row .open-edit { position: absolute; width: 2.4em; height: 2.4em; line-height: 2.2em; font-size: 1.1em; border: 0.2em solid black; top: 5.2em; left: 0.3em; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8);
}
.expando-table .expando-view .expando-row .open-view:hover,
.expando-table .expando-view .expando-row .open-edit:hover,
.expando-table .expando-edit .expando-row .open-view:hover,
.expando-table .expando-edit .expando-row .open-edit:hover { color: black;
}
.expando-table .expando-view .expando-row .open-view:hover i,
.expando-table .expando-view .expando-row .open-edit:hover i,
.expando-table .expando-edit .expando-row .open-view:hover i,
.expando-table .expando-edit .expando-row .open-edit:hover i { transform: scale(1.3);
}
.expando-table .expando-view .view-content,
.expando-table .expando-view .edit-content,
.expando-table .expando-edit .view-content,
.expando-table .expando-edit .edit-content { line-height: 10em;
}
.expando-table .expando-view .view-content p,
.expando-table .expando-view .edit-content p,
.expando-table .expando-edit .view-content p,
.expando-table .expando-edit .edit-content p { text-align: center;
}
.expando-table.view-active { overflow: hidden;
}
.expando-table.view-active .expando-view { visibility: visible; left: 0;
}
.expando-table.edit-active { overflow: hidden;
}
.expando-table.edit-active .expando-edit { visibility: visible; left: 0;
}
Interactive data table with Angular and SCSS - Script Codes JS Codes
var PageApp = angular.module('angularPageApp', ['ngSanitize']);
// allows us to render html tags are part of the help items (see easyHelpPopout directive below)
PageApp.filter('renderHTMLCorrectly', function($sce)
{ return function(stringToParse) { return $sce.trustAsHtml(stringToParse); };
});
PageApp.controller('easyTableCtrl', function($scope) { // define an arry to hold the table data $scope.items = []; $scope.headers = ['job name', 'company', 'client', 'status']; // color presets $scope.colorPresets = ['#941C2F', '#2B4162', '#00B563', '#D63300', '#E31044', '#476A6F']; $scope.presetIndex = 1; $scope.presetsOpen = false; // help popout $scope.helpItems = [ 'Click a row to access it\'s <span>Action Menu</span>.', 'Click <span>View</span> to see additional record information.', 'Click <span>Edit</span> to change any editable record fields.', 'Click <span>Delete</span> and confirm to remove a record permanently.' ]; $scope.helpOpen = false; // define view state variables $scope.viewActive = false; $scope.editActive = false; $scope.deleteActive = false; // defined active view data object $scope.viewItem = {}; // define what to do when the use clicks off the table area $scope.onClickAway = function($event) { $event.stopPropagation(); $scope.helpOpen = false; if ($scope.viewActive === true || $scope.editActive === true || $scope.deleteActive === true) return; $scope.resetRowState(); }; $scope.getColorPresetClassName = function() { if ($scope.presetIndex <= 0) return ''; return ['color-preset-', $scope.presetIndex].join(''); }; $scope.onPresetClick = function(index) { $scope.presetIndex = index; }; // define what to do when a row is clicked $scope.onRowClick = function($event, item) { $event.stopPropagation(); $scope.helpOpen = false; $scope.resetRowState(); item._state.showUI = true; }; // set _state.showUI to false for all row items $scope.resetRowState = function() { for(var i = 0; i < $scope.items.length; i++) { $scope.items[i]._state.showUI = false; } }; // setup a sub-class to manage ui operations $scope.ui = (function(){ function deactivateAll() { $scope.scrollElement.scrollTop = 0; $scope.viewActive = false; $scope.editActive = false; $scope.deleteActive = false; } return { activateView: function($event, item) { $event.stopPropagation(); $scope.$broadcast('set-view-item', item); deactivateAll(); $scope.viewActive = true; }, activateEdit: function($event, item) { console.log('activate edit'); $event.stopPropagation(); $scope.$broadcast('set-edit-item', item); deactivateAll(); $scope.editActive = true; }, activateDelete: function($event, item) { $event.stopPropagation(); deactivateAll(); //$scope.deleteActive = true; } }; }()); // generate some demo data (function makeExampleData() { for(var i = 1; i <= 100; i++) { $scope.items.push({ name: ['Job Name ', i].join(''), company: ['Company ', i].join(''), client: ['Client ', i].join(''), status: ['Status ', i].join(''), _state: { showUI: false } }); } }());
});
PageApp.directive('easyTable', function($timeout) { return { restrict: 'E', template: [ '<div class="expando-table" ng-class="{\'view-active\': viewActive === true, \'edit-active\': editActive == true}">', '<div class="expando-header">', '<div class="header-cell" ng-repeat="header in headers">{{ header }}</div>', '</div>', '<div class="expando-rows">', '<div class="expando-row" ng-repeat="item in items" ', 'ng-class="{showUI: item._state.showUI === true}" ', 'ng-click="onRowClick($event, item)">', '<div class="popout-ui">', '<div class="row-actions flex-center">', '<div class="row-action close ng-hide" ng-click="resetRowState()"><i class="fa fa-times"></i></div>', '<div class="row-action view" ng-class="{\'hint--bottom\': $index <= 1, \'hint--top\': $index > 0}" data-hint="View" ng-click="ui.activateView($event, item)"><i class="fa fa-external-link"></i></div>', '<div class="row-action edit" ng-class="{\'hint--bottom\': $index <= 1, \'hint--top\': $index > 0}" data-hint="Edit" ng-click="ui.activateEdit($event, item)"><i class="fa fa-pencil"></i></div>', '<div class="row-action delete" ng-class="{\'hint--bottom\': $index <= 1, \'hint--top\': $index > 0}" data-hint="Delete" ng-click="ui.activateDelete($event, item)""><i class="fa fa-trash"></i></div>', '</div>', '</div>', '<div class="click-indicator"><i class="fa fa-arrow-right"></i></div>', '<div class="data-cell">{{ item.name }}</div>', '<div class="data-cell">{{ item.company }}</div>', '<div class="data-cell">{{ item.client }}</div>', '<div class="data-cell">{{ item.status }}</div>', '</div>', '</div>', '<easy-view></easy-view>', '<easy-edit></easy-edit>', '</div>' ].join(''), link: function(scope, element, attrs) { scope.scrollElement = element[0].querySelector('.expando-table'); } };
});
PageApp.directive('easyView', function($timeout) { return { restrict: 'E', replace: true, template: [ '<div class="expando-view">', '<div class="expando-row no-scale">', '<div class="data-cell">{{ item.name }}</div>', '<div class="data-cell">{{ item.company }}</div>', '<div class="data-cell">{{ item.client }}</div>', '<div class="data-cell">{{ item.status }}</div>', '<div class="open-edit hint--right" data-hint="Edit" ng-click="ui.activateEdit($event, item)"><i class="fa fa-pencil"></i></div>', '<div class="close-view hint--right" data-hint="Close" ng-click="$event.stopPropagation(); viewActive = false;"><i class="fa fa-times"></i></div>', '</div>', '<div class="view-content">', '<p>View Content</p>', '</div>', '</div>'].join(''), link: function(scope, element, attrs) { scope.$on('set-view-item', function(event, viewItem) { scope.item = viewItem; }); } };
});
PageApp.directive('easyEdit', function() { return { restrict: 'E', replace: true, template: [ '<div class="expando-edit">', '<div class="expando-row no-scale">', '<div class="data-cell">{{ item.name }}</div>', '<div class="data-cell">{{ item.company }}</div>', '<div class="data-cell">{{ item.client }}</div>', '<div class="data-cell">{{ item.status }}</div>', '<div class="open-view hint--right" data-hint="View" ng-click="ui.activateView($event, item)"><i class="fa fa-external-link"></i></div>', '<div class="close-edit hint--right" data-hint="Close" ng-click="$event.stopPropagation(); editActive = false;"><i class="fa fa-times"></i></div>', '</div>', '<div class="edit-content">', '<p>Edit Content</p>', '</div>', '</div>'].join(''), link: function(scope, element, attrs) { scope.$on('set-edit-item', function(event, editItem) { scope.item = editItem; }); } };
});
PageApp.directive('easyColorPresets', function() { return { restrict: 'E', replace: true, template: [ '<div class="color-presets flex" ng-class="{open: presetsOpen === true}">', '<div class="preset-toggle hint--right" data-hint="Table Color">', '<span class="fa-stack" ng-click="presetsOpen = !presetsOpen">', '<i class="fa fa-square-o fa-stack-2x"></i>', '<i class="fa fa-paint-brush fa-stack-1x"></i>', '</span>', '</div>', '<div class="color-preset" ng-repeat="preset in colorPresets">', '<div class="color-box" style="background-color: {{ preset }}" ng-click="onPresetClick($index + 1);"></div>', '</div>', '</div>'].join('') };
});
PageApp.directive('easyHelpPopout', function() { return { restrict: 'E', replace: true, template: [ '<div class="help-popout" ng-class="{open: helpOpen === true}">', '<div class="help-toggle hint--left" data-hint="Help">', '<span class="fa-stack" ng-click="$event.stopPropagation(); helpOpen = !helpOpen">', '<i class="fa fa-circle-thin fa-stack-2x"></i>', '<i class="fa fa-question fa-stack-1x"></i>', '</span>', '</div>', '<div class="help-items" ng-click="$event.stopPropagation();">', '<div class="help-item" ng-repeat="item in helpItems">', '<div class="help-item-number">{{ $index + 1 }}</div>', '<div class="help-box" ng-bind-html="item | renderHTMLCorrectly"></div>', '</div>', '</div>', '</div>'].join('') };
});
| Developer | Robert Lowe |
| Username | rlo206 |
| Uploaded | July 23, 2022 |
| Rating | 3.5 |
| Size | 9,618 Kb |
| Views | 38,456 |
Do you need developer help for Interactive data table with Angular and SCSS?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Robert Lowe (rlo206) Script Codes
| Name | Size |
| Google Mic Icon | 3,388 Kb |
| Learning to style range inputs | 4,175 Kb |
| Crazy Tables | 3,065 Kb |
| Fly-Through-Loader | 2,936 Kb |
| CSS Color Wheel Loaders | 5,381 Kb |
| Windows 10 toggle button directive | 4,256 Kb |
| Semantic Element Document Outline | 3,153 Kb |
| Whirlpool Spinner with 4 sizes | 3,473 Kb |
| Testing Semantic UI Grid | 2,832 Kb |
| Dynamic UI with AngularJS attributes | 5,934 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| React TODO | Enieste | 3,320 Kb |
| Mobile Nav Menu | AliKlein | 4,745 Kb |
| Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
| Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| Hamburger Menu Animation | Salmanraza | 2,580 Kb |
| Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
| NT Tribute | Skybutterfly | 2,850 Kb |
| Barber Shop | Bhlaird | 6,270 Kb |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!