DataGear 内置表格图表底层采用的是DataTable表格组件，在数据可视化看板中，可以通过dg-chart-options设置表格选项，具体选项可参考https://datatables.net/reference/option/，本文仅列出一些常用配置示例。
注意：下面这些配置示例需要DataGear-2.1.1及以上版本。
- 自定义列属性（标题、列宽、是否可排序等）
<script type="text/javascript">
var tableOptions=
{
columns:
[
{
//标题
title: "自定义标题",
//列宽："100px"、"20%"
width: "100px",
//是否可排序
orderable: false,
//是否可见
visible: false
},
...
]
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...- 排序
<script type="text/javascript">
var tableOptions=
{
//开启排序
ordering: true,
//第一列升序、第二列降序
order: [[ 0, 'asc' ], [ 1, 'desc' ]]
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...- 客户端分页
<script type="text/javascript">
var tableOptions=
{
//开启分页
paging: true,
//可选，自定义页大小下拉框
lengthMenu: [ 10, 25, 50, 75, 100 ],
//可选，默认页大小
pageLength: 50
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...- 固定列
<script type="text/javascript">
var tableOptions=
{
fixedColumns:
{
//左边固定列数
leftColumns: 1,
//右边固定列数
rightColumns: 1
}
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...- 添加序号列
<script type="text/javascript">
var tableOptions=
{
//添加一个序号列
processRenderOptions: function(options)
{
var columns = options.columns;
columns.unshift(
{
title: "序号",
orderable: false,
data: "",
render: function(value, type, row, meta)
{
return "";
}
});
},
//设置序号列值
rowCallback: function(row, data, displayNum, displayIndex, dataIndex)
{
$("td:first", row).html(displayIndex);
}
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...- 轮播
...
<div dg-chart-options="{carousel: true}" dg-chart-widget="..."></div>
...表格轮播详细设置项参考：
http://datagear.tech/documentation/#dashboardEleAttr_dg-chart-options
中的【表格】图表配置说明，另参考文章：DataGear 制作按行滚动的轮播表格数据可视化看板
源码地址：
Gitee：https://gitee.com/datagear/datagear