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