标签: ngx-datatable

我尝试将自定义CSS附加到ngx-datatable单元格。

<ngx-datatable-column 
  *ngFor="let column of tableOptions.columnDefs"
  [cellClass]="'my-custom-cell'"
  ...

的CSS my-custom-cell：

.my-custom-cell{
  padding: 0;
}

在开发工具中，我可以看到datatable-body-cell有类

class="datatable-body-cell my-custom-cell sort-active"

问题是没有css被覆盖

我试图在拖动 ngx-datatable 的列标题时滚动水平滚动条。我正在使用 Angular4。在我的 ngx-datatable 中有水平滚动条，当我从左向右拖动第一列时，水平滚动条应该move.当我从左向右拖动ngx-datatable的列时，如何使水平滚动条移动。请帮我

 <ngx-datatable
    class="material"
    [rows]="row"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [reorderable]="true"
    [scrollbarV]="true"
    [scrollbarH]="true"
    >
    <ngx-datatable-column name="Name" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Name
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Name']}}
        </div>
      </ng-template>
  </ngx-datatable-column>    

   <ngx-datatable-column name="Address" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Address
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Address']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  


   <ngx-datatable-column name="Age" [minWidth]="150" 
        [resizeable]="true">
      <ng-template let-column="column" ngx-datatable-header-template >
        Age
      </ng-template>

      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        <div>
          {{row['Age']}}
        </div>
      </ng-template>
  </ngx-datatable-column>  

</ngx-datatable>

我将ngx-datatable的列宽存储在数据库中。我使用AJAX调用获取这些值。

如何为数据表设置这些值？

我试过的

1. 在<ngx-datatable-column>元素上设置[width]属性
2. 将datatable注入@ViewChild(DatatableComponent) table: DatatableComponent;并设置， this.table.bodyComponent.columns[0].width = 500;
   
   我尝试使用和不使用这些方法this.table.recalculate();，但是似乎没有任何效果。

编辑
我使用datatable-column与header-template和cell-template。

我正在使用带引导主题的ngx-datatable.当鼠标悬停在细胞上时,我找不到或弄清楚如何改变样式？在这个例子中它变灰了

http://swimlane.github.io/ngx-datatable/#css

我已经能够像这样改变激活颜色,只是无法弄清楚悬停颜色.

::ng-deep .ngx-datatable.bootstrap .datatable-body .datatable-body-
row.active {
  background-color: #006eff;
  color: #FFF;
}

我正在遵循 ngx-datatable 的主题设置。

首先，我 npm 安装了 ngx-datatable 10.4.0，因为它与 Angular 4 和早期版本的 rxjs 兼容。

我的问题是表格的样式。

我的模板文件如下所示：

<div>
    <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'standard'"
        class="material"
        fixed-header
        [headerHeight]="50"
        [scrollbarV]="true">
    </ngx-datatable>
</div>

我的 scss 文件内部：

@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';

我可以确认材质样式在一定程度上有效：

我想在标题下添加边框底部，但无济于事。

如果您查看演示：http://swimlane.github.io/ngx-datatable/#filter

示例表始终有一个底部边框。

如何配置表格以在标题下方插入边框底部？

我的 ngx-datatable 设置有问题吗？

在 ngx-data 表中如何循环遍历 ngx-data 表中的嵌套 Json 对象。

json 示例对象：

rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[
 { id:'101',name:'spinach'}]
 },
{ name: 'Dany', gender: 'Male', company: 'KFC',topings:[
 { id:'102',name:'onion'}] },
{ name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[
 { id:'103',name:'ginger'}]},

];

在 ngx-datatable 中，我需要如何循环遍历上面的 json 对象中的topings 并在数据表中显示toping 数据。任何人都可以回答我必须如何做到这一点......？

我将 ngx-datatable 与 Angular 4.x 一起使用。我正在实现一个如此处所述的表。我收到以下错误消息。ngx-datatable 有任何依赖吗？

Uncaught Error: Template parse errors: Can't bind to 
'columnMode' since it isn't a known property of 'ngx-datatable'

请让我知道您对此的评论。

谢谢，拉贾K

我正在构建一个angular2 web应用程序,我有一个ngx-datatable元素.列(标题)名称是数字.

有什么办法可以在视图中编辑这些名字吗？

在搜索之后,我找不到很多关于ngx-datatable-column甚至资源的信息,ngx-datatable-column甚至在代码中都没有显示更改列名的可能性.

我是angular和ngx数据表的新手。如何在鼠标单击事件中获取行数据

onClick(event) {
// I need to get row data here 
}

我在 Angular 6 项目中使用ngx-datatable，我需要显示一个带有列名称的图标，如下面的屏幕截图所示。（在我需要显示图标的地方标记为x ）

这是我当前的数据表代码。

<ngx-datatable
   *ngIf="!isDataLoading"
   class="data-table"
   [scrollbarH]="true"
   [rows]="rowsData"
   [columnMode]="'force'"
   [columns]="columnsData"
   [headerHeight]="50"
   [footerHeight]="50"
   [rowHeight]="'auto'"
   [limit]="10"
   [selected]="selected"
   [selectionType]="'single'"
   (select)='onSelect($event)'>
</ngx-datatable>

在 mypage.component.ts 中

columnsData = [
   { prop: 'dataName', name: 'Name' },
   { prop: 'dataGender', name: 'Gender' },
   { prop: 'dataCompany', name: 'Company' }
];

如何显示带有列名称的图标？