如何在分组数据时禁用项目计数？

Question

我有一个 table，其中数据根据某些特定字段进行分组。我正在使用 Tabulator.JS 将 JSON 数据转换为 table。分组属性按要求工作，但结果显示该组中的项目数。我需要禁用此项目计数功能。

我使用了 Tabulator 的 "groupBy" 功能来对数据进行分组。我不确定我是否应该编写一个自定义函数来显示组 header 或者是否有一个内置功能来禁用项目计数。

我使用以下函数加载制表符。

function reloadTabulator() {
    ScheduleTable = new Tabulator("#ClassScheduleDiv", {
        placeholder: "No Content",
        layout: "fitColumns",
        columns: [
        { title: "Start Time", field: "StartTime", sorter: "number" },
        { title: "Class Name", field: "ClassName", sorter: "string" },
        { title: "Instructor", field: "StaffName", sorter: "string" },
        { title: "Availabilty", field: "Availability", sorter: "string", 
        formatter: GetBookNowButton },
        { title: "Duration", field: "Duration", sorter: "string" }
        ],
        groupBy: ["ClassStartDate"],
        groupStartOpen: [true]
    });
}

我使用table.setData(Dataset)函数将数据设置为table如下：

ScheduleTable.setData(MyJSON);

当前输出： Current Output Image

预期输出： Expected Output Image

Answer 1

.tabulator-row>span {
  display: none;
}

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982",
    gender: 'male'
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982",
    gender: 'female'

  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980",
    gender: 'male'

  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999",
    gender: 'male'

  },
];

const columns = [ //Define Table Columns
  {
    title: "Name",
    field: "name",
    width: 150
  },
  {
    title: "money",
    field: "money",
    align: "left",
    formatter: "money"
  },
  {
    title: "Favourite Color",
    field: "col"
  },
  {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    align: "center"
  }, {
    title: "Gender",
    field: "gender"
  }
];


const table = new Tabulator("#example-table", {
  placeholder: "No Content",
  data: tabledata1, //load row data from array

  layout: "fitColumns",
  movableRows: true,
  groupBy: ["ClassStartDate"],
  groupStartOpen: [true],
  columns: columns
});
const removeArrow = function() {
  table.setColumns(col2);
}


$('#removeArrow').click(function() {
  removeArrow();
});

.tabulator-row>span {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="example-table"></div>
</body>

</html>

如何在分组数据时禁用项目计数？

How to disable item count while grouping data?

tabulator