英文:
Customize row counting on children rows formatter React Tabulator
问题
I'm using React Tabulator with Nested data to create data tree table. For example, I have a list of elements with parents and children and "rownum" formatters:
- Parent 1
- Parent 2
With expanded element in data tree, it will be:
- Parent 1
-
- Children 1
-
- Children 2
-
- Parent 2
-
- Children 1
-
It displays 0 as row count for the children.
Now I want to add decimal counting alignment to the children row numbers with custom formatter function.
How can I achieve this?
- Parent 1
- 1.1. Children 1
- 1.2. Children 2
- Parent 2
- 2.2. Children 1
Image example: Example
I have tried to customize the row count but cannot handle it
英文:
I'm using React Tabulator with Nested data to create data tree table. For example, I have a list of elements with parents and children and "rownum" formatters:
- Parent 1
- Parent 2
With expanded element in data tree, it will be:
- Parent 1
-
- Children 1
-
- Children 2
-
- Parent 2
-
- Children 1
-
It displays 0 as row count for the children.
Now I want to add decimal counting alignment to the children row numbers with custom formatter function.
How can I achieve this ?
- Parent 1
- 1.1. Children 1
- 1.2. Children 2
- Parent 2
- 2.2. Children 1
Image example: Example
I have tried to customize the row count but cannot handle it
答案1
得分: 0
我不确定在tabulator中是否有一种方法可以完成这个操作，但作为一种替代方案，您可以在将表格数据加载到tabulator之前通过添加行号来处理表格数据。这里是一个示例：
const tableData = [
{ name: 'Oli Bob', location: 'United Kingdom', gender: 'male', dob: '14/04/1984', _children: [
{ name: 'Mary May', location: 'Germany', gender: 'female', dob: '14/05/1982' },
{ name: 'Christine Lobowski', location: 'France', gender: 'female', dob: '22/05/1982' },
{ name: 'Brendon Philips', location: 'USA', gender: 'male', dob: '01/08/1980', _children: [
{ name: 'Margret Marmajuke', location: 'Canada', gender: 'female', dob: '31/01/1999' },
{ name: 'Frank Harbours', location: 'Russia', gender: 'male', dob: '12/05/1966' }
]
}
]
},
{ name: 'Jamie Newhart', location: 'India', gender: 'male', dob: '14/05/1985' },
{ name: 'Gemma Jane', location: 'China', gender: 'female', dob: '22/05/1982', _children: [
{ name: 'Emily Sykes', location: 'South Korea', gender: 'female', dob: '11/11/1970' }] },
{ name: 'James Newman', location: 'Japan', gender: 'male', dob: '22/03/1998' }
]
// 添加行号
const numberRows = (data, rowNum) => {
data.forEach((row, index) => {
row.rowNum = (rowNum ? rowNum + '.' : '') + (index + 1)
if (row._children) {
numberRows(row._children, row.rowNum)
}
})
}
numberRows(tableData)
// Tabulator表格
const table = new Tabulator('#table', {
height: '300px',
data: tableData,
dataTree: true,
dataTreeStartExpanded: true,
columns: [
{ title: '', field: 'rowNum', width: 100, headerSort: false },
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Location', field: 'location', width: 140 },
{ title: 'Gender', field: 'gender', width: 100 },
{ title: 'Date Of Birth', field: 'dob', width: 140 }
]
})
<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<div id="table"></div>
请注意，这是一个示例代码，您需要确保在您的项目中正确引入Tabulator库和其他依赖项，以使此代码正常工作。
英文:
I am not sure if there is a way to do this within tabulator but, as an alternative, you can process the table data by adding row numbers before loading it into tabulator. Here is an example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const tableData = [
{ name: 'Oli Bob', location: 'United Kingdom', gender: 'male', dob: '14/04/1984', _children: [
{ name: 'Mary May', location: 'Germany', gender: 'female', dob: '14/05/1982' },
{ name: 'Christine Lobowski', location: 'France', gender: 'female', dob: '22/05/1982' },
{ name: 'Brendon Philips', location: 'USA', gender: 'male', dob: '01/08/1980', _children: [
{ name: 'Margret Marmajuke', location: 'Canada', gender: 'female', dob: '31/01/1999' },
{ name: 'Frank Harbours', location: 'Russia', gender: 'male', dob: '12/05/1966' }
]
}
]
},
{ name: 'Jamie Newhart', location: 'India', gender: 'male', dob: '14/05/1985' },
{ name: 'Gemma Jane', location: 'China', gender: 'female', dob: '22/05/1982', _children: [
{ name: 'Emily Sykes', location: 'South Korea', gender: 'female', dob: '11/11/1970' }] },
{ name: 'James Newman', location: 'Japan', gender: 'male', dob: '22/03/1998' }
]
// Add row numbers
const numberRows = (data, rowNum) => {
data.forEach((row, index) => {
row.rowNum = (rowNum ? rowNum + '.' : '') + (index + 1)
if (row._children) {
numberRows(row._children, row.rowNum)
}
})
}
numberRows(tableData)
// Tabulator table
const table = new Tabulator('#table', {
height: '300px',
data: tableData,
dataTree: true,
dataTreeStartExpanded: true,
columns: [
{ title: '', field: 'rowNum', width: 100, headerSort: false },
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Location', field: 'location', width: 140 },
{ title: 'Gender', field: 'gender', width: 100 },
{ title: 'Date Of Birth', field: 'dob', width: 140 }
]
})
<!-- language: lang-html -->
<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<div id="table"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论