<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="content-body">
      <!-- Basic initialization table -->
      <section id="initialization">
        <div class="row">
          <div class="col-12" *blockUI="'basicInitialization'; message: 'Loading'">
            <m-card [options]="options" (reloadFunction)="reloadBasicInitialization($event)">
              <ng-container mCardHeaderTitle>
                Basic initialization
              </ng-container>
              <ng-container mCardBody>
                <div class="card-dashboard dataTables_wrapper dt-bootstrap">
                  <p class="card-text">Buttons can be initialised very easily though the buttons object which can be
                    given as an
                    array of the buttons that you wish to display.
                  </p>
                  <div class="table table-striped table-bordered data-basic-initialization">
                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
                      [rowHeight]="'auto'" [rows]="rows" [columnMode]="'force'" [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">

                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.name}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.position}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.office}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.age}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.salary}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.startdate}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                    </ngx-datatable>
                  </div>
                </div>
              </ng-container>
            </m-card>
          </div>
        </div>
      </section>
      <!--/ Basic initialization table -->


      <!--/ Basic initialization table -->
      <!-- Custom button table -->
      <section id="custom-button">
        <div class="row">
          <div class="col-12" *blockUI="'customButton'; message: 'Loading'">
            <m-card [options]="options" (reloadFunction)="reloadCustomButton($event)">
              <ng-container mCardHeaderTitle>
                Custom button
              </ng-container>
              <ng-container mCardBody>
                <div class="card-dashboard dataTables_wrapper dt-bootstrap">
                  <p class="card-text">Fundamentally, each button is described by an object - this object
                    is read by
                    Buttons and
                    displayed as appropriate. There are a number of parameters that Buttons will
                    automatically look for
                    in the
                    button description object such as buttons.buttons.text and buttons.buttons.action
                    which are the two
                    fundamental
                    parameters (button text and the action to take when activated).
                  </p>
                  <button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">My button</button>
                  <div class="table table-striped table-bordered data-custom-button">
                    <div class="btn-group btn-group-toggle">
                    </div>
                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
                      [rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">

                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.name}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.position}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.office}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.age}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.salary}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.startdate}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                    </ngx-datatable>
                  </div>
                </div>
              </ng-container>
            </m-card>
          </div>
        </div>
      </section>
      <!--/ Custom button table -->

      <!-- Class names table -->
      <section id="class-names">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Class names</h4>
              </div>
              <div class="card-content collapse show">
                <div class="card-body card-dashboard dataTables_wrapper dt-bootstrap">
                  <p class="card-text">This example also shows button definition objects being used to
                    describe buttons.
                    In this
                    case we use the buttons.buttons.className option to specify a custom class name for
                    the button. A
                    little bit of
                    CSS is used to style the buttons - the class names and CSS can of course be adjusted
                    to suit
                    whatever styling
                    requirements you have.
                    RedOrangeGreen
                  </p>
                  <button type="button" class="btn btn-secondary red my-1" (click)="onSingleEvents()">Red</button>
                  <button type="button" class="btn btn-secondary orange my-1" (click)="onSingleEvents()">Orange</button>
                  <button type="button" class="btn btn-secondary Green my-1" (click)="onSingleEvents()">Green</button>
                  <div class="table table-striped table-bordered data-class-names">
                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
                      [rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">

                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.name}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.position}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.office}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.age}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.salary}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.startdate}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                    </ngx-datatable>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </section>
      <!--/ Class names table -->
      <!-- Multiple button groups table -->
      <section id="multiple">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Multiple button groups</h4>
              </div>
              <div class="card-content collapse show">
                <div class="card-body card-dashboard dataTables_wrapper dt-bootstrap">
                  <p class="card-text">Buttons' ability to have new instances constructed arbitrarily
                    gives it the
                    ability to have
                    multiple button instances created for a single DataTable. This can be useful if you
                    wish to display
                    button
                    groups with different functionality (file export, editing, etc).</p>

                  <button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">My button1</button>
                  <div class="table table-striped table-bordered data-keyboard-activation">

                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
                      [rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">

                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.name}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.position}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.office}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.age}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.salary}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
                        <ng-template ngx-datatable-cell-template let-row="row">
                          <span>{{row.startdate}}</span>
                        </ng-template>
                      </ngx-datatable-column>
                    </ngx-datatable>
                  </div>

                  <button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">Button2</button>
                  <button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">Button3</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--/ Multiple button groups table -->
    </div>
  </div>
</div>

<!-- ////////////////////////////////////////////////////////////////////////////-->
