colour one row of antd table based on condition

up vote
0
down vote

favorite

I'm using antd table in my project. I want to change the color of one row of table if IsDefaultAccount = true where IsDefaultAccount is from back end

The code of the table in the index.js page is :

<Table

                    className="table-layout"

                    columns={this.state.columns}

                    dataSource={filteredData}

                    rowClassName='data-row'

                    bordered={true}

                    size={"small"}

                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

                    loading={this.state.loading}

                    pagination={{ pageSize: 14 }}

                />

asked Nov 8 at 12:05

Jane Fred

6010

add a comment |

up vote
0
down vote

favorite

I'm using antd table in my project. I want to change the color of one row of table if IsDefaultAccount = true where IsDefaultAccount is from back end

The code of the table in the index.js page is :

<Table

                    className="table-layout"

                    columns={this.state.columns}

                    dataSource={filteredData}

                    rowClassName='data-row'

                    bordered={true}

                    size={"small"}

                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

                    loading={this.state.loading}

                    pagination={{ pageSize: 14 }}

                />

asked Nov 8 at 12:05

Jane Fred

6010

add a comment |

up vote
0
down vote

favorite

I'm using antd table in my project. I want to change the color of one row of table if IsDefaultAccount = true where IsDefaultAccount is from back end

The code of the table in the index.js page is :

<Table

                    className="table-layout"

                    columns={this.state.columns}

                    dataSource={filteredData}

                    rowClassName='data-row'

                    bordered={true}

                    size={"small"}

                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

                    loading={this.state.loading}

                    pagination={{ pageSize: 14 }}

                />

asked Nov 8 at 12:05

Jane Fred

6010

I'm using antd table in my project. I want to change the color of one row of table if IsDefaultAccount = true where IsDefaultAccount is from back end

The code of the table in the index.js page is :

<Table

                    className="table-layout"

                    columns={this.state.columns}

                    dataSource={filteredData}

                    rowClassName='data-row'

                    bordered={true}

                    size={"small"}

                    onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

                    loading={this.state.loading}

                    pagination={{ pageSize: 14 }}

                />

reactjs redux antd

asked Nov 8 at 12:05

Jane Fred

6010

asked Nov 8 at 12:05

Jane Fred

6010

asked Nov 8 at 12:05

Jane Fred

6010

asked Nov 8 at 12:05

Jane Fred

6010

asked Nov 8 at 12:05

Jane Fred

6010

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Assuming that each data-item consists of a IsDefaultAccount property:

<Table

  className="table-layout"

  columns={this.state.columns}

  dataSource={filteredData}

  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }

  bordered={true}

  size={"small"}

  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

  loading={this.state.loading}

  pagination={{ pageSize: 14 }}

/>

Let me know if this works.

answered Nov 8 at 12:17

rash.tay

1,56531843

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

1

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53207404%2fcolour-one-row-of-antd-table-based-on-condition%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

Assuming that each data-item consists of a IsDefaultAccount property:

<Table

  className="table-layout"

  columns={this.state.columns}

  dataSource={filteredData}

  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }

  bordered={true}

  size={"small"}

  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

  loading={this.state.loading}

  pagination={{ pageSize: 14 }}

/>

Let me know if this works.

answered Nov 8 at 12:17

rash.tay

1,56531843

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

1

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

add a comment |

up vote
1
down vote

accepted

Assuming that each data-item consists of a IsDefaultAccount property:

<Table

  className="table-layout"

  columns={this.state.columns}

  dataSource={filteredData}

  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }

  bordered={true}

  size={"small"}

  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

  loading={this.state.loading}

  pagination={{ pageSize: 14 }}

/>

Let me know if this works.

answered Nov 8 at 12:17

rash.tay

1,56531843

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

1

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

add a comment |

up vote
1
down vote

accepted

Assuming that each data-item consists of a IsDefaultAccount property:

<Table

  className="table-layout"

  columns={this.state.columns}

  dataSource={filteredData}

  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }

  bordered={true}

  size={"small"}

  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

  loading={this.state.loading}

  pagination={{ pageSize: 14 }}

/>

Let me know if this works.

answered Nov 8 at 12:17

rash.tay

1,56531843

Assuming that each data-item consists of a IsDefaultAccount property:

<Table

  className="table-layout"

  columns={this.state.columns}

  dataSource={filteredData}

  rowClassName={(record) => record.IsDefaultAccount ? 'data-row active-row' : 'data-row' }

  bordered={true}

  size={"small"}

  onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }

                    onRowClick={(record, index, event) => this.handleRowClick(record)}

  loading={this.state.loading}

  pagination={{ pageSize: 14 }}

/>

Let me know if this works.

answered Nov 8 at 12:17

rash.tay

1,56531843

answered Nov 8 at 12:17

rash.tay

1,56531843

answered Nov 8 at 12:17

rash.tay

1,56531843

answered Nov 8 at 12:17

rash.tay

1,56531843

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

1

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

add a comment |

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

1

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

The code is working Let me ask you one thing , "data-row active-row" , 'data-row' are these two styles?
– Jane Fred
Nov 8 at 12:27

data-row would have your common row style rules which I am assuming would be the same for active and inactive rows. active-row should only be applied to the rows of which you wanna change the color. In your case, IsDefaultAccount. Please do upvote if the code works for you.
– rash.tay
Nov 8 at 12:30

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk