bootstrangular-datatable/bootstrangular-datatable.metadata.json

Este es un simple modulo de tabla interactiva al estilo de Angular, Bootstrap y Datatable. Necesita angular/core, bootstrap y sus dependencias (jquery y popper) para funcionar.

{"__symbolic":"module","version":4,"metadata":{"DatatableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"datatable","template":"<div class=\"row\">\n  <div class=\"col-md-6\">\n    <div *ngIf=\"tableBtnOptions\" class=\"btn-group btn-group-sm mr-2 mb-2\" role=\"group\">\n      <button *ngFor=\"let btnTable of tableBtnOptions\"\n        (click)=\"btnTable.action()\"\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        data-toggle=\"tooltip\"\n        data-placement=\"bottom\"\n        [title]=\"btnTable.title\">\n        <div *ngIf=\"btnTable.icon; then btnTableIcon; else btnTableTitle\"></div>\n        <ng-template #btnTableIcon>\n          <i *ngIf=\"btnTable.icon.origin === 'bootstrap'\" [class]=\"btnTable.icon.icon\"></i>\n          <img *ngIf=\"btnTable.icon.origin === 'img'\" [attr.src]=\"btnTable.icon.icon\" class=\"img-icon\">\n        </ng-template>\n        <ng-template #btnTableTitle>{{btnTable.title}}</ng-template>\n      </button>\n    </div>\n  </div>\n  <div class=\"col-md-6\">\n    <div *ngIf=\"showSearcher\" class=\"input-group input-group-sm mb-2\">\n      <div class=\"input-group-prepend\">\n        <div class=\"input-group-text\" id=\"btnGroupAddon\">🔎</div>\n      </div>\n      <input type=\"text\" class=\"form-control\"\n        placeholder=\"Buscar en la tabla\" aria-label=\"Buscar en la tabla\"\n        (keyup)=\"applyFilter($event.target.value)\">\n    </div>\n  </div>\n</div>\n\n<div class=\"table-responsive\">\n  <table class=\"table table-bordered table-sm table-striped\">\n    <thead>\n      <tr>\n        <th *ngIf=\"showNumeration\">#<!--span class=\"text-muted float-right\">⬇️⬆️</span--></th>\n        <th *ngFor=\"let head of getHeaders()\">{{head.value}}</th>\n        <th *ngIf=\"rowBtnOptions\">⚙️</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let row of getPageData(); let i = index\">\n        <td *ngIf=\"showNumeration\">{{i + getPageRowStart()}}</td>\n        <td *ngFor=\"let key of getHeaders()\">{{row[key.id]}}</td>\n        <th *ngIf=\"rowBtnOptions\">\n          <div class=\"row\" style=\"margin: auto;\">\n            <div *ngFor=\"let btnRow of rowBtnOptions\"\n              (click)=\"btnRow.action(row)\"\n              class=\"btn-row\">\n              <div *ngIf=\"btnRow.icon; then btnRowIcon; else btnRowTitle\"></div>\n              <ng-template #btnRowIcon>\n                <i *ngIf=\"btnRow.icon.origin === 'bootstrap'\" [class]=\"btnRow.icon.icon\"\n                  data-toggle=\"tooltip\" data-placement=\"bottom\" [title]=\"btnRow.title\"></i>\n                <img *ngIf=\"btnRow.icon.origin === 'img'\" [attr.src]=\"btnRow.icon.icon\" class=\"img-icon\"\n                  data-toggle=\"tooltip\" data-placement=\"bottom\" [title]=\"btnRow.title\">\n              </ng-template>\n              <ng-template #btnRowTitle>\n                <small>{{btnRow.title}}</small>\n              </ng-template>\n            </div>\n          </div>\n        </th>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"row\">\n  <div class=\"col-sm-6\">\n    <div *ngIf=\"showSizeOptions\"\n      class=\"input-group input-group-sm mr-2 mb-2 select-page-size\">\n      <div class=\"input-group-prepend\">\n        <label class=\"input-group-text\" for=\"\">Renglones por página</label>\n      </div>\n      <select class=\"custom-select\" (change)=\"changePageSize($event.target.value)\">\n        <option *ngFor=\"let option of pageSizeOptions\"\n          [value]=\"option\"\n          [selected]=\"option === pageSize? 'selected': null\">\n          {{option}}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"col-sm-6\">\n    <nav *ngIf=\"showPaginator\">\n      <ul class=\"pagination pagination-sm justify-content-end\">\n        <li class=\"page-item\">\n          <span class=\"page-link paginator-label\">\n            {{getPageRowStart()}} - {{getPageRowEnd()}} de {{this.getDataSource().length}}\n          </span>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{'disabled': pageIndex === 1}\">\n          <a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"goFirstPage()\">\n            <span aria-hidden=\"true\">[&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{'disabled': pageIndex === 1}\">\n          <a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"goPreviousPage()\">\n            <span aria-hidden=\"true\">&laquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\"><span class=\"page-link paginator-label\">{{pageIndex}}</span></li>\n        <li class=\"page-item\" [ngClass]=\"{'disabled': pageIndex === getLastPage()}\">\n          <a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"goNextPage()\">\n            <span aria-hidden=\"true\">&raquo;</span>\n          </a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{'disabled': pageIndex === getLastPage()}\">\n          <a class=\"page-link\" href=\"javascript:void(0);\" (click)=\"goLastPage()\">\n            <span aria-hidden=\"true\">&raquo;]</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</div>","styles":[".select-page-size{width:250px}.paginator-label{background-color:#e9ecef!important;border:1px solid #ced4da!important}.page-link,.paginator-label{color:#495057!important}.img-icon{max-height:14px;max-width:14px}.btn-row>*{color:#535c68;cursor:pointer;margin-inline:4px}.btn-row>i{max-height:14px;max-width:14px}"]}]}],"members":{"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"pageIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"tableBtnOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"rowBtnOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"showNumeration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showSearcher":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showPaginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getDataSource":[{"__symbolic":"method"}],"getPageData":[{"__symbolic":"method"}],"getPageRowStart":[{"__symbolic":"method"}],"getPageRowEnd":[{"__symbolic":"method"}],"goFirstPage":[{"__symbolic":"method"}],"goPreviousPage":[{"__symbolic":"method"}],"goNextPage":[{"__symbolic":"method"}],"goLastPage":[{"__symbolic":"method"}],"getLastPage":[{"__symbolic":"method"}],"changePageSize":[{"__symbolic":"method"}],"checkPageSize":[{"__symbolic":"method"}],"addPageSizeToPageSizeOptions":[{"__symbolic":"method"}],"getHeaders":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}]}},"BtnOption":{"__symbolic":"interface"},"DatatableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DatatableComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"DatatableComponent"}]}]}],"members":{}}},"origins":{"DatatableComponent":"./lib/datatable.component","BtnOption":"./lib/datatable.component","DatatableModule":"./lib/datatable.module"},"importAs":"bootstrangular-datatable"}