How to mix rowspan and expandable rows in ant design table

Asked
Active3 hr before
Viewed126 times

8 Answers

designtablerowspanexpandable
90%

the target table should look something like this:,I want to use both row span and expandable rows from ant design table component,the table being generated looks something like this:

Pretag
 Pretag team - issue, fix, solve, resolve
88%

antd row table render in adf popup. and in fact, I just want to trigger the event of the date, date range; Static dropdown react antd Table dynamically merge cells. I think that's possible to do this by checking the event target just before expanding. Developer Express Inc disclaims all warranties, either express or implied,.,react antd Table dynamically merge cells rowSpan: index 0 ? children.length : 0,//Add the first row of data to the rowSpan field })) ) return.,The render configuration of the column in the antd table can be queried for the official website. Thought. 1. The values ​​of all rows in the list are required to be.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

To display a collection of structured data.,To sort, search, paginate, filter data.,A table displays rows of data.

Specify dataSource of Table as an array of data.

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;
load more v
65%

Use colspan and rowspan like W3C standards <table>,A table displays rows of data.,The nz-table can be used like W3C Standard <table>. Developers can control every part of the table as they wish.

import {
   NzTableModule
} from 'ng-zorro-antd/table';

The data passed to [nzData] is exported with Template Context after processing (including paging, sorting and filtering). *ngFor can be used to render current page data in table.

<nz-table #basicTable [nzData]="dataSet">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
      <td>
        <a>Action 一 {{data.name}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Do you want to merge rows with the same table data,It turns out that you don’t understand how rowspan is used. The meaning of rowspan here is to describe how many rows this column takes up. If you change the data to the following and set rowspan to 5, you can see it.,@michael_caiThank you. Thank you. I finally understand. I found a lot of information on the Internet. They are very vague. Your answer is really useful. Thank you

Do you want to merge rows with the same table data

//Determine the number of rows of merged data
mergeRowSpan = (text, arry, key) => {
   let i = 0;
   arry.forEach(item => {
      item[key] === text ? i++ : ''
   });
   return i;
};
//Table header
const columns = [{
      Title: 'collector name',
      dataIndex: 'collector',
      key: 'collector',
      render: value => {
         const obj = {
            children: value,
            props: {},
         };
         obj.props.rowSpan = this.mergeRowSpan(value, dataSource, 'collector');
         return obj;
      },
   },
   {
      Title: 'serial port',
      dataindex: 'B',
      key: 'B',
   },
   {
      Title: 'instrument address',
      dataindex: ' C ',
      key: ' C '
   },
   {
      Title: 'instrument number',
      dataindex: 'd ',
      key: 'd'
   },
   {
      Title: 'instrument name',
      dataindex: 'e',
      key: 'e'
   },
   {
      Title: 'communication status',
      dataindex: ' f ',
      key: ' f '
   },
   {
      Title: 'last collection time',
      dataindex: 'g',
      key: 'g'
   },
   {
      Title: 'total online time',
      dataindex: 'H',
      key: 'H'
   },

];
//Tabular data
const dataSource = [{
      collector: '1',
      b: '1',
      c: '1',
      d: '1',
      e: '1',
      f: '1',
      g: '1',
      h: '1'
   },
   {
      collector: '1',
      b: '1',
      c: '1',
      d: '1',
      e: '1',
      f: '1',
      g: '1',
      h: '1'
   },
   {
      collector: '1',
      b: '2',
      c: '1',
      d: '1',
      e: '1',
      f: '1',
      g: '1',
      h: '1'
   },
   {
      collector: '1',
      b: '2',
      c: '1',
      d: '1',
      e: '1',
      f: '1',
      g: '1',
      h: '1'
   },
   {
      collector: '1',
      b: '3',
      c: '1',
      d: '1',
      e: '1',
      f: '1',
      g: '1',
      h: '1'
   },
];
load more v
22%

I have searched the issues of this repository and believe that this is not a duplicate.,What particular problems do you want to solve?,@AhmedSayed77 I've realized that's not a good idea, I'll add expanded as the fourth parameter to expandedRowRender, so that you can:

  key: 1,
     expanded: true,
     expandByClick: false
  })``
  `

P.S. I love your work, and I rely on it heavily on all my project. I do realize how much effort you did put, and still are putting into it. Thank you very much for  this magnificent framework


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
load more v
60%

Editor: Yuan BaiqiPs: please indicate the source of the quotation, thank you!,The data fields include fake data such as key`nameageaddress`tags. The purpose is to merge elements with the same name into an array, and then expand these arrays into a new array that meets the antd Table rendering conditions, as follows:

const data = [{
      key: '0',
      name: 'John Brown',
      age: 22,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
   },
   {
      key: '1',
      name: 'John Brown',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
   },
   {
      key: '2',
      name: 'John Brown',
      age: 22,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
   },
   {
      key: '5',
      name: 'Joe Black',
      age: 3,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
   },
   {
      key: '6',
      name: 'Joe Black',
      age: 342,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
   },
   {
      key: '7',
      name: 'Joe Black',
      age: 62,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
   },
];
load more v

Other "design-table" queries related to "How to mix rowspan and expandable rows in ant design table"