Creating a sortable table (with React.js) that was produced using Flask and Bootstrap
up vote
1
down vote
favorite
I've got a table that I've created using Flask by getting data from an API and later compiling it into a table with bootstrap as a front end. I want to make the headers clickable in order to sort them, I've heard that React.js might be a good option for this, is there anyway for me to use React directly with my table without rewriting the entire app in javascript?
python reactjs flask
asked Nov 12 at 9:20
IMTRYING
132
add a comment |
up vote
1
down vote
favorite
I've got a table that I've created using Flask by getting data from an API and later compiling it into a table with bootstrap as a front end. I want to make the headers clickable in order to sort them, I've heard that React.js might be a good option for this, is there anyway for me to use React directly with my table without rewriting the entire app in javascript?
python reactjs flask
asked Nov 12 at 9:20
IMTRYING
132
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I've got a table that I've created using Flask by getting data from an API and later compiling it into a table with bootstrap as a front end. I want to make the headers clickable in order to sort them, I've heard that React.js might be a good option for this, is there anyway for me to use React directly with my table without rewriting the entire app in javascript?
python reactjs flask
asked Nov 12 at 9:20
IMTRYING
132
I've got a table that I've created using Flask by getting data from an API and later compiling it into a table with bootstrap as a front end. I want to make the headers clickable in order to sort them, I've heard that React.js might be a good option for this, is there anyway for me to use React directly with my table without rewriting the entire app in javascript?
python reactjs flask
python reactjs flask
asked Nov 12 at 9:20
IMTRYING
132
asked Nov 12 at 9:20
IMTRYING
132
asked Nov 12 at 9:20
IMTRYING
132
asked Nov 12 at 9:20
IMTRYING
132
asked Nov 12 at 9:20
IMTRYING
132
132
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
Possibly! If you can install react then you should be able to use a library such as the react-collapsing-table. You would need to install it with npm then you should be able to import/require it on your page and just do
<ReactCollapsingTable rows={data} columns={columns} />
Hope that helps :)
answered Nov 12 at 10:54
Tall Paul
1,23631629
add a comment |
up vote
0
down vote
I implemented a react-bootstrap-table2 frontend with a flask backend here: http://thomaxxl.pythonanywhere.com/ja/index.html#/books (no sorting implemented there but it is possible by using the appropriate react-bootstrap-table syntax: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html )
You can implement sorting in the backend or the frontend.
- To implement it in the backend, your api must support sorting parameters (eg. in the query string: ?sort=title,id )
- To implement sorting in the frontend you must fetch all your data which is not feasible for large tables
Other things you may want to consider are pagination, filtering and search.
answered Nov 12 at 13:43
Tohmaxxx
1776
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
});
}
});
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%2f53259063%2fcreating-a-sortable-table-with-react-js-that-was-produced-using-flask-and-boot%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Possibly! If you can install react then you should be able to use a library such as the react-collapsing-table. You would need to install it with npm then you should be able to import/require it on your page and just do
<ReactCollapsingTable rows={data} columns={columns} />
Hope that helps :)
answered Nov 12 at 10:54
Tall Paul
1,23631629
add a comment |
up vote
0
down vote
Possibly! If you can install react then you should be able to use a library such as the react-collapsing-table. You would need to install it with npm then you should be able to import/require it on your page and just do
<ReactCollapsingTable rows={data} columns={columns} />
Hope that helps :)
answered Nov 12 at 10:54
Tall Paul
1,23631629
add a comment |
up vote
0
down vote
up vote
0
down vote
Possibly! If you can install react then you should be able to use a library such as the react-collapsing-table. You would need to install it with npm then you should be able to import/require it on your page and just do
<ReactCollapsingTable rows={data} columns={columns} />
Hope that helps :)
answered Nov 12 at 10:54
Tall Paul
1,23631629
Possibly! If you can install react then you should be able to use a library such as the react-collapsing-table. You would need to install it with npm then you should be able to import/require it on your page and just do
<ReactCollapsingTable rows={data} columns={columns} />
Hope that helps :)
answered Nov 12 at 10:54
Tall Paul
1,23631629
answered Nov 12 at 10:54
Tall Paul
1,23631629
answered Nov 12 at 10:54
Tall Paul
1,23631629
answered Nov 12 at 10:54
Tall Paul
1,23631629
1,23631629
add a comment |
add a comment |
up vote
0
down vote
I implemented a react-bootstrap-table2 frontend with a flask backend here: http://thomaxxl.pythonanywhere.com/ja/index.html#/books (no sorting implemented there but it is possible by using the appropriate react-bootstrap-table syntax: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html )
You can implement sorting in the backend or the frontend.
- To implement it in the backend, your api must support sorting parameters (eg. in the query string: ?sort=title,id )
- To implement sorting in the frontend you must fetch all your data which is not feasible for large tables
Other things you may want to consider are pagination, filtering and search.
answered Nov 12 at 13:43
Tohmaxxx
1776
add a comment |
up vote
0
down vote
I implemented a react-bootstrap-table2 frontend with a flask backend here: http://thomaxxl.pythonanywhere.com/ja/index.html#/books (no sorting implemented there but it is possible by using the appropriate react-bootstrap-table syntax: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html )
You can implement sorting in the backend or the frontend.
- To implement it in the backend, your api must support sorting parameters (eg. in the query string: ?sort=title,id )
- To implement sorting in the frontend you must fetch all your data which is not feasible for large tables
Other things you may want to consider are pagination, filtering and search.
answered Nov 12 at 13:43
Tohmaxxx
1776
add a comment |
up vote
0
down vote
up vote
0
down vote
I implemented a react-bootstrap-table2 frontend with a flask backend here: http://thomaxxl.pythonanywhere.com/ja/index.html#/books (no sorting implemented there but it is possible by using the appropriate react-bootstrap-table syntax: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html )
You can implement sorting in the backend or the frontend.
- To implement it in the backend, your api must support sorting parameters (eg. in the query string: ?sort=title,id )
- To implement sorting in the frontend you must fetch all your data which is not feasible for large tables
Other things you may want to consider are pagination, filtering and search.
answered Nov 12 at 13:43
Tohmaxxx
1776
I implemented a react-bootstrap-table2 frontend with a flask backend here: http://thomaxxl.pythonanywhere.com/ja/index.html#/books (no sorting implemented there but it is possible by using the appropriate react-bootstrap-table syntax: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html )
You can implement sorting in the backend or the frontend.
- To implement it in the backend, your api must support sorting parameters (eg. in the query string: ?sort=title,id )
- To implement sorting in the frontend you must fetch all your data which is not feasible for large tables
Other things you may want to consider are pagination, filtering and search.
answered Nov 12 at 13:43
Tohmaxxx
1776
answered Nov 12 at 13:43
Tohmaxxx
1776
answered Nov 12 at 13:43
Tohmaxxx
1776
answered Nov 12 at 13:43
Tohmaxxx
1776
1776
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53259063%2fcreating-a-sortable-table-with-react-js-that-was-produced-using-flask-and-boot%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
