Mixing
sorting the table data when not using react state
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am trying to avoid using react state for better performance. However, i have no idea on how can i sort table data. I tried to have sort function in the column that needs sorting with the type("asc" or "desc") and based on name or title or like that. This is the configuration and code for my table
code
const sortBy = (data, key, type = "asc") => data.sort((a, b) => a[key].toLowerCase() < b[key].toLowerCase());
const columns = {
name: {
key: "name",
label: "Listing Name",
css: "color: #444; font-size: 1.1rem; font-weight: bold;",
content: (item: Object) => (
<NameColumn>
{item.url && <Avatar name={item.name} url={item.url} size={80} type="square" />}
<NameWrapper>
<Name>{item.name}</Name>
{item.location && <SubName color='#797979'>{item.location}</SubName>}
</NameWrapper>
</NameColumn>
)
},
agent: {
key: "agent",
label: "Agent",
sort: (data: Array<Object>, item: Object) => sortBy(data, item, 'desc'),
isSortable: true,
hideOnPhone: true
},
price: {
key: "price",
label: "Prices",
hideOnPhone: true
},
};
const userData = [
{
id: 1,
name: "Rahul",
location: 'Delhi',
agent: "hello man",
price: '$15000',
},
{
id: 2,
name: "Sachin Tendulkar",
location: 'Delhi',
agent: "Mumbai Inc",
price: '$15000',
},
];
const rowConfig = {
uniqueKey: "id",
css: `
height: 100px;
&:hover {
background-color: rgba(216, 216, 216, 0.2)};
}
`,
onClick: (e, item) => {
console.log("row was clicked", item);
}
};
type Props = {
location: Object
};
const Tables = ({ location }: Props) => {
const queries = new URLSearchParams(location.search);
return (
<Main>
<Table
rowConfig={rowConfig}
columns={columns}
data={userData}
totalPages={10}
currentPage={
queries.has("page") ? parseInt(queries.get("page"), 10) : 1
}
basePageLink={""}
/>
</Main>
);
};
export default Tables;
const Table = ({
columns,
data = ,
rowConfig: { uniqueKey = "id", css , onClick } = {},
currentPage,
totalPages,
basePageLink
}: Props) => {
const headerColumns = () =>
Object.keys(columns).map(key => (
<Th
key={key}
align={columns[key].align}
width={columns[key].width}
onClick={() => columns[key].isSortable && columns[key].sort(data, key)}
css={columns[key].cssHeader}
>
{columns[key].label ? columns[key].label : ""}
</Th>
));
const cell = (key, item) => (
<Td
key={key}
align={columns[key].align}
width={columns[key].width}
css={columns[key].css}
>
{columns[key].content ? columns[key].content(item) : item[key]}
</Td>
);
const row = (item: Object) => (
<Tr
key={item[uniqueKey]}
css={css}
onClick={onClick ? (e: Event) => onClick(e, item) : null}
>
{Object.keys(columns).map(key => cell(key, item))}
</Tr>
);
return (
<Main>
<T>
<thead>
<tr>{headerColumns()}</tr>
</thead>
<tbody>{data.map(i => row(i))}</tbody>
</T>
<TablePagination
currentPage={currentPage}
totalPages={totalPages}
basePageLink={basePageLink}
/>
</Main>
);
};
export default Table;
The way i am doing wont work cause i am not using the react state which will notify react that the state has changed so re-render the agent column(for now sorting is used in agent column only so).
Any suggesstions? Help would be appreciated!
javascript reactjs
edited Jan 3 at 6:40
Rajendra arora
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
add a comment |
0
I am trying to avoid using react state for better performance. However, i have no idea on how can i sort table data. I tried to have sort function in the column that needs sorting with the type("asc" or "desc") and based on name or title or like that. This is the configuration and code for my table
code
const sortBy = (data, key, type = "asc") => data.sort((a, b) => a[key].toLowerCase() < b[key].toLowerCase());
const columns = {
name: {
key: "name",
label: "Listing Name",
css: "color: #444; font-size: 1.1rem; font-weight: bold;",
content: (item: Object) => (
<NameColumn>
{item.url && <Avatar name={item.name} url={item.url} size={80} type="square" />}
<NameWrapper>
<Name>{item.name}</Name>
{item.location && <SubName color='#797979'>{item.location}</SubName>}
</NameWrapper>
</NameColumn>
)
},
agent: {
key: "agent",
label: "Agent",
sort: (data: Array<Object>, item: Object) => sortBy(data, item, 'desc'),
isSortable: true,
hideOnPhone: true
},
price: {
key: "price",
label: "Prices",
hideOnPhone: true
},
};
const userData = [
{
id: 1,
name: "Rahul",
location: 'Delhi',
agent: "hello man",
price: '$15000',
},
{
id: 2,
name: "Sachin Tendulkar",
location: 'Delhi',
agent: "Mumbai Inc",
price: '$15000',
},
];
const rowConfig = {
uniqueKey: "id",
css: `
height: 100px;
&:hover {
background-color: rgba(216, 216, 216, 0.2)};
}
`,
onClick: (e, item) => {
console.log("row was clicked", item);
}
};
type Props = {
location: Object
};
const Tables = ({ location }: Props) => {
const queries = new URLSearchParams(location.search);
return (
<Main>
<Table
rowConfig={rowConfig}
columns={columns}
data={userData}
totalPages={10}
currentPage={
queries.has("page") ? parseInt(queries.get("page"), 10) : 1
}
basePageLink={""}
/>
</Main>
);
};
export default Tables;
const Table = ({
columns,
data = ,
rowConfig: { uniqueKey = "id", css , onClick } = {},
currentPage,
totalPages,
basePageLink
}: Props) => {
const headerColumns = () =>
Object.keys(columns).map(key => (
<Th
key={key}
align={columns[key].align}
width={columns[key].width}
onClick={() => columns[key].isSortable && columns[key].sort(data, key)}
css={columns[key].cssHeader}
>
{columns[key].label ? columns[key].label : ""}
</Th>
));
const cell = (key, item) => (
<Td
key={key}
align={columns[key].align}
width={columns[key].width}
css={columns[key].css}
>
{columns[key].content ? columns[key].content(item) : item[key]}
</Td>
);
const row = (item: Object) => (
<Tr
key={item[uniqueKey]}
css={css}
onClick={onClick ? (e: Event) => onClick(e, item) : null}
>
{Object.keys(columns).map(key => cell(key, item))}
</Tr>
);
return (
<Main>
<T>
<thead>
<tr>{headerColumns()}</tr>
</thead>
<tbody>{data.map(i => row(i))}</tbody>
</T>
<TablePagination
currentPage={currentPage}
totalPages={totalPages}
basePageLink={basePageLink}
/>
</Main>
);
};
export default Table;
The way i am doing wont work cause i am not using the react state which will notify react that the state has changed so re-render the agent column(for now sorting is used in agent column only so).
Any suggesstions? Help would be appreciated!
javascript reactjs
edited Jan 3 at 6:40
Rajendra arora
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57
add a comment |
0
0
0
I am trying to avoid using react state for better performance. However, i have no idea on how can i sort table data. I tried to have sort function in the column that needs sorting with the type("asc" or "desc") and based on name or title or like that. This is the configuration and code for my table
code
const sortBy = (data, key, type = "asc") => data.sort((a, b) => a[key].toLowerCase() < b[key].toLowerCase());
const columns = {
name: {
key: "name",
label: "Listing Name",
css: "color: #444; font-size: 1.1rem; font-weight: bold;",
content: (item: Object) => (
<NameColumn>
{item.url && <Avatar name={item.name} url={item.url} size={80} type="square" />}
<NameWrapper>
<Name>{item.name}</Name>
{item.location && <SubName color='#797979'>{item.location}</SubName>}
</NameWrapper>
</NameColumn>
)
},
agent: {
key: "agent",
label: "Agent",
sort: (data: Array<Object>, item: Object) => sortBy(data, item, 'desc'),
isSortable: true,
hideOnPhone: true
},
price: {
key: "price",
label: "Prices",
hideOnPhone: true
},
};
const userData = [
{
id: 1,
name: "Rahul",
location: 'Delhi',
agent: "hello man",
price: '$15000',
},
{
id: 2,
name: "Sachin Tendulkar",
location: 'Delhi',
agent: "Mumbai Inc",
price: '$15000',
},
];
const rowConfig = {
uniqueKey: "id",
css: `
height: 100px;
&:hover {
background-color: rgba(216, 216, 216, 0.2)};
}
`,
onClick: (e, item) => {
console.log("row was clicked", item);
}
};
type Props = {
location: Object
};
const Tables = ({ location }: Props) => {
const queries = new URLSearchParams(location.search);
return (
<Main>
<Table
rowConfig={rowConfig}
columns={columns}
data={userData}
totalPages={10}
currentPage={
queries.has("page") ? parseInt(queries.get("page"), 10) : 1
}
basePageLink={""}
/>
</Main>
);
};
export default Tables;
const Table = ({
columns,
data = ,
rowConfig: { uniqueKey = "id", css , onClick } = {},
currentPage,
totalPages,
basePageLink
}: Props) => {
const headerColumns = () =>
Object.keys(columns).map(key => (
<Th
key={key}
align={columns[key].align}
width={columns[key].width}
onClick={() => columns[key].isSortable && columns[key].sort(data, key)}
css={columns[key].cssHeader}
>
{columns[key].label ? columns[key].label : ""}
</Th>
));
const cell = (key, item) => (
<Td
key={key}
align={columns[key].align}
width={columns[key].width}
css={columns[key].css}
>
{columns[key].content ? columns[key].content(item) : item[key]}
</Td>
);
const row = (item: Object) => (
<Tr
key={item[uniqueKey]}
css={css}
onClick={onClick ? (e: Event) => onClick(e, item) : null}
>
{Object.keys(columns).map(key => cell(key, item))}
</Tr>
);
return (
<Main>
<T>
<thead>
<tr>{headerColumns()}</tr>
</thead>
<tbody>{data.map(i => row(i))}</tbody>
</T>
<TablePagination
currentPage={currentPage}
totalPages={totalPages}
basePageLink={basePageLink}
/>
</Main>
);
};
export default Table;
The way i am doing wont work cause i am not using the react state which will notify react that the state has changed so re-render the agent column(for now sorting is used in agent column only so).
Any suggesstions? Help would be appreciated!
javascript reactjs
edited Jan 3 at 6:40
Rajendra arora
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
I am trying to avoid using react state for better performance. However, i have no idea on how can i sort table data. I tried to have sort function in the column that needs sorting with the type("asc" or "desc") and based on name or title or like that. This is the configuration and code for my table
code
const sortBy = (data, key, type = "asc") => data.sort((a, b) => a[key].toLowerCase() < b[key].toLowerCase());
const columns = {
name: {
key: "name",
label: "Listing Name",
css: "color: #444; font-size: 1.1rem; font-weight: bold;",
content: (item: Object) => (
<NameColumn>
{item.url && <Avatar name={item.name} url={item.url} size={80} type="square" />}
<NameWrapper>
<Name>{item.name}</Name>
{item.location && <SubName color='#797979'>{item.location}</SubName>}
</NameWrapper>
</NameColumn>
)
},
agent: {
key: "agent",
label: "Agent",
sort: (data: Array<Object>, item: Object) => sortBy(data, item, 'desc'),
isSortable: true,
hideOnPhone: true
},
price: {
key: "price",
label: "Prices",
hideOnPhone: true
},
};
const userData = [
{
id: 1,
name: "Rahul",
location: 'Delhi',
agent: "hello man",
price: '$15000',
},
{
id: 2,
name: "Sachin Tendulkar",
location: 'Delhi',
agent: "Mumbai Inc",
price: '$15000',
},
];
const rowConfig = {
uniqueKey: "id",
css: `
height: 100px;
&:hover {
background-color: rgba(216, 216, 216, 0.2)};
}
`,
onClick: (e, item) => {
console.log("row was clicked", item);
}
};
type Props = {
location: Object
};
const Tables = ({ location }: Props) => {
const queries = new URLSearchParams(location.search);
return (
<Main>
<Table
rowConfig={rowConfig}
columns={columns}
data={userData}
totalPages={10}
currentPage={
queries.has("page") ? parseInt(queries.get("page"), 10) : 1
}
basePageLink={""}
/>
</Main>
);
};
export default Tables;
const Table = ({
columns,
data = ,
rowConfig: { uniqueKey = "id", css , onClick } = {},
currentPage,
totalPages,
basePageLink
}: Props) => {
const headerColumns = () =>
Object.keys(columns).map(key => (
<Th
key={key}
align={columns[key].align}
width={columns[key].width}
onClick={() => columns[key].isSortable && columns[key].sort(data, key)}
css={columns[key].cssHeader}
>
{columns[key].label ? columns[key].label : ""}
</Th>
));
const cell = (key, item) => (
<Td
key={key}
align={columns[key].align}
width={columns[key].width}
css={columns[key].css}
>
{columns[key].content ? columns[key].content(item) : item[key]}
</Td>
);
const row = (item: Object) => (
<Tr
key={item[uniqueKey]}
css={css}
onClick={onClick ? (e: Event) => onClick(e, item) : null}
>
{Object.keys(columns).map(key => cell(key, item))}
</Tr>
);
return (
<Main>
<T>
<thead>
<tr>{headerColumns()}</tr>
</thead>
<tbody>{data.map(i => row(i))}</tbody>
</T>
<TablePagination
currentPage={currentPage}
totalPages={totalPages}
basePageLink={basePageLink}
/>
</Main>
);
};
export default Table;
The way i am doing wont work cause i am not using the react state which will notify react that the state has changed so re-render the agent column(for now sorting is used in agent column only so).
Any suggesstions? Help would be appreciated!
javascript reactjs
javascript reactjs
edited Jan 3 at 6:40
Rajendra arora
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
edited Jan 3 at 6:40
Rajendra arora
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
edited Jan 3 at 6:40
Rajendra arora
1,51211018
edited Jan 3 at 6:40
Rajendra arora
1,51211018
edited Jan 3 at 6:40
Rajendra arora
1,51211018
1,51211018
asked Jan 3 at 5:04
SerenitySerenity
9603727
asked Jan 3 at 5:04
SerenitySerenity
9603727
asked Jan 3 at 5:04
SerenitySerenity
9603727
9603727
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57
add a comment |
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57
add a comment |
0
active
oldest
votes
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',
autoActivateHeartbeat: false,
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016621%2fsorting-the-table-data-when-not-using-react-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016621%2fsorting-the-table-data-when-not-using-react-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can manually force an update (forceUpdate) but I cannot see the benefits on not using state and then forcing renders. Use the state instead and use shouldComponentUpdate for managing when to re render
– quirimmo
Jan 3 at 5:17
can you write this in answer section with sample code, please?
– Serenity
Jan 3 at 6:57