<commit_before><div class="router-outlet">

  <div class="header-title-demo">
    <h1 class="title">DataTable</h1>
    <p class="text-content">The DataTable displays data in a tabular format and provides a full spectrum of configuration options.</p>
</div>
<hr>
<div class="showcase">
  <!--<div class="row">-->
  <!--<div class="col-md-12">-->
  <!--<div class="group-component">-->
  <!--<h5>Mode Paginator</h5>-->
  <!--<tl-datatable [data]="data" [mode]="'paginator'" [height]="'310px'"> </tl-datatable>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div>-->


  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Normal</h5>
        <tl-datatable [data]="data" (rowSelect)="onRowSelect($event, index )"></tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>


  <!--<div class="row">-->
    <!--<div class="col-md-12">-->
      <!--<div class="group-component">-->
        <!--<h5>Mode Normal + Filter Data</h5>-->
        <!--<tl-input #tlInput [placeholder]="'Pesquise por um registro...'" [autocomplete]="false"></tl-input>-->
        <!--<br/>-->
        <!--<tl-datatable-->
          <!--[data]="data"-->
          <!--[globalFilter]="tlInput"-->
          <!--[globalFilterOptions]="{caseSensitive: false}"-->
          <!--(rowSelect)="onRowSelect($event, index )">-->
        <!--</tl-datatable>-->
        <!--<div>Row Selected:<span> {{rowSelected | json}} </span></div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->

  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Scrollable</h5>
        <tl-datatable [data]="data" (rowSelect)="onRowSelect($event, index )" [mode]="'scrollable'" [rowsPage]="50" [height]="310"> </tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Scrollable + LazyLoad</h5>
        <tl-datatable
          [data]="dataLazy"
          [mode]="'scrollable'"
          [height]="300"
          [rowsClient]="12"
          [rowsPage]="take"
          [lazy]="true"
          (lazyLoad)="onLazyLoad($event)"
        >
        </tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>

  <hr>
</div>
<div class="setup">
  <h3 class="title">Properties</h3>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
        <th>Options</th>
      </tr>
      </thead>
      <tbody *ngFor="let item of dataTableProperties; let i = index">
      <tr>
        <td><b>{{ item.name }}</b></td>
        <td><span class="badge">{{ item.type }}</span></td>
        <td><code>{{ item.default }}</code></td>
        <td>{{ item.description }}</td>
        <td><code> {{ item.options }} </code></td>
      </tr>
      </tbody>

    </table>
  </div>

  <h3 class="title">Events</h3>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>Name</th>
        <th>Parameters</th>
        <th>Description</th>
      </tr>
      </thead>
      <tbody *ngFor="let item of dataTableEvents; let i = index">
      <tr >
        <td style=" vertical-align: middle;"><b>{{ item.name }}</b></td>
        <td style=" vertical-align: middle;">
          <div *ngFor="let param of item.parameters; let i = index">
            <code> {{param.event}} </code>: <span style="color: #000;">{{param.description}}</span>
          </div>
        </td>
        <td style=" vertical-align: middle;">{{ item.description }}</td>
      </tr>
      </tbody><commit_msg>docs(datatable): Add new styles on datatable<commit_after><div class="router-outlet">

  <div class="header-title-demo">
    <h1 class="title">DataTable</h1>
    <p class="text-content">The DataTable displays data in a tabular format and provides a full spectrum of configuration options.</p>
</div>
<hr>
<div class="showcase">
  <!--<div class="row">-->
  <!--<div class="col-md-12">-->
  <!--<div class="group-component">-->
  <!--<h5>Mode Paginator</h5>-->
  <!--<tl-datatable [data]="data" [mode]="'paginator'" [height]="'310px'"> </tl-datatable>-->
  <!--</div>-->
  <!--</div>-->
  <!--</div>-->


  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Normal</h5>
        <tl-datatable [data]="data" (rowSelect)="onRowSelect($event, index )"></tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>


  <!--<div class="row">-->
    <!--<div class="col-md-12">-->
      <!--<div class="group-component">-->
        <!--<h5>Mode Normal + Filter Data</h5>-->
        <!--<tl-input #tlInput [placeholder]="'Pesquise por um registro...'" [autocomplete]="false"></tl-input>-->
        <!--<br/>-->
        <!--<tl-datatable-->
          <!--[data]="data"-->
          <!--[globalFilter]="tlInput"-->
          <!--[globalFilterOptions]="{caseSensitive: false}"-->
          <!--(rowSelect)="onRowSelect($event, index )">-->
        <!--</tl-datatable>-->
        <!--<div>Row Selected:<span> {{rowSelected | json}} </span></div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->

  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Scrollable</h5>
        <tl-datatable [data]="data" (rowSelect)="onRowSelect($event, index )" [mode]="'scrollable'" [rowsPage]="50" [height]="310"> </tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">
      <div class="group-component">
        <h5>Mode Scrollable + LazyLoad</h5>
        <tl-datatable
          [data]="dataLazy"
          [mode]="'scrollable'"
          [height]="300"
          [rowsClient]="12"
          [rowsPage]="take"
          [lazy]="true"
          (lazyLoad)="onLazyLoad($event)"
        >
        </tl-datatable>
        <div>Row Selected:<span> {{rowSelected | json}} </span></div>
      </div>
    </div>
  </div>

  <hr>
</div>
<div class="setup">
  <h3 class="title">Properties</h3>
  <div class="table-box">
    <table class="table table-truly">
      <thead class="table-truly-head">
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
        <th>Options</th>
      </tr>
      </thead>
      <tbody  class="table-truly-body" *ngFor="let item of dataTableProperties; let i = index">
      <tr>
        <td><span>{{ item.name }}</span></td>
        <td><span class="badge">{{ item.type }}</span></td>
        <td><code>{{ item.default }}</code></td>
        <td>{{ item.description }}</td>
        <td><code> {{ item.options }} </code></td>
      </tr>
      </tbody>

    </table>
  </div>

  <h3 class="title">Events</h3>
  <div class="table-box">
    <table class="table table-truly">
      <thead class="table-truly-head">
      <tr>
        <th>Name</th>
        <th>Parameters</th>
        <th>Description</th>
      </tr>
      </thead>
      <tbody  class="table-truly-body" *ngFor="let item of dataTableEvents; let i = index">
      <tr >
        <td style=" vertical-align: middle;"><span>{{ item.name }}</span></td>
        <td style=" vertical-align: middle;">
          <div *ngFor="let param of item.parameters; let i = index">
            <code> {{param.event}} </code>: <span style="color: #000;">{{param.description}}</span>
          </div>
        </td>
        <td style=" vertical-align: middle;">{{ item.description }}</td>
      </tr>
      </tbody>
{'fraction_non_alphanumeric': 0.24243584833397167, 'fraction_numerical': 0.010723860589812333, 'mean_word_length': 2.353595890410959, 'pattern_counts': {'":': 0, '<': 361, '<?xml version=': 0, '>': 361, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2402965', 'n_tokens_mistral': 2764, 'n_tokens_neox': 2651, 'n_words': 516}