Milestone to v3.0.0

[AllenFang]

v3.0.0

I'm going to start a plan for react-bootstrap-table@3.0.0, so I wonder if any ideas for v3.0.0, you can tell me in this threads. Anyway, I've considered some issues must be solve in v3.0.0(may not, it depend):

1. Make all the components customizable(include pagination, insert button or modal etc.)
   There're the relative issues:
   How to make 'search input' float left？  #492, When you override the text of the Export CSV button it doesn't override the icon #469, Made glyphicons for toolbar buttons overridable #476, Expose 'Add' and 'Delete' button through refs. #356, can not support customize button #251, Custom table footer #172, Hide pagination size selector dropdown #487, How to hide pagination when there is only one page? #484, paginationShowsTotal custom text #462, Control position of components (pagination, export button, ...) #456, New and Delete button custom text #426 etc.
2. Remove the column filter on bottom of table
3. Remove the dependency for bootstrap.js

Feel free to give any suggestion or feedback. BTW, if u r interesting for contributing this repo, it's welcome

alpha todo list

Thanks
@AllenFang

[ghost]

Hi Allen, I've been using this project very heavily for some work I've done recently. Would like to contribute soon but since I've been full time on my project I've unfortunately not had time. Something I did start to work on but haven't had time to implement is the ability to copy one/multiple rows (depending on whether you've used checkbox/radio for select). The other is an import from CSV function. I've just added custom buttons for this myself but would be useful to have as part of the table. (Sorry in advance if these have been mentioned before). Some other thoughts that come to mind are: custom rendered cells available in add dialog, modal dialog being popped up for cell edit, mass paste to edit many cells at once. Thanks for all your hard work on this - it's a great project!

[AllenFang]

@lbargery, I'm glad to hear your feedback.

copy one/multiple rows

it's a cool feature!

import from CSV

It's also a awesome feature, someone who has asked this feature but I just reject lol. but it's welcome to make a PR.

custom rendered cells available in add dialog, modal dialog being popped up for cell edit

that's why I want to bump to v3.0.0, it's a commons problem which a lots of user encounter.

[Amertz08]

Possible to add #220 to it? Not sure what to call it maybe nested sorting? Multiple sorting? Anyway just a suggestion love what you have done so far just started using this in a project and it saved me a ton of time. Keep up the good work.

[AllenFang]

HI @Amertz08, for #220, I've no any plan to do it, I want to keep the sort simple and the sorting behavior in most table component does not support the nested sorting or something like that #220. Anyway, there's a lot of important thing need to be done, so I wont support #220 in near future, But PR is welcome 👍
sorry sir

[inthedark122]

Hello @AllenFang .
Thank you for you good project. It very simple for using.
I'm waiting for removing bootstrap.js from project 👍

[Amertz08]

Possible to add a view all to the pagination? EDIT: realized there is an easy workaround for this.

[AllenFang]

@Amertz08, it's a much custom functionality for users. Maybe I will try to implement it. :)

there is an easy workaround for this

so what's that?

[mbaroukh]

Hi,

My suggestions:

• have data not being only an array. It could be an array but it could also be an object which provide getCount() and getItem() (promise) methods so data loading could be lazy. In this case, of course, sorting/filtering should also be custom callbacks.
• I had problems with the default "height=100%" : pagination was outside of the screen. Never found why. But I had to use "height=auto" and I wonder if it shouldn't be the default value
• For custom buttons, there should be a way to ling them to selected data : the button is always clickable and expect no data OR the button can only be clicked if data is selected and expect the datas as a parameter .

Also, I did not found any "developper" page which explain how to contribute, package, ... It may be obvious for javascript developpers, but I'm not and I need some time to understand.

Tell us when you'll make the branch so we can contibute.

[abhirao]

@AllenFang I need the ability to provide custom cell editors ( see #162)

I'm going to start on a PR. Will model it after how the custom column filter components are implemented. Will ask for feedback on the interface before I get too far.

[Amertz08]

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pagination: true
        };
    }

    _togglePagination() {
        this.setState({ pagination: !this.state.pagination });
    }

    render() {
        return (
            <div>
                <button onClick={ ::this._togglePagination } >Toggle</button>
                <BootstrapTable
                    pagination={this.state.pagination}>
                </BootstrapTable>
            </div>
        )
    }
}

@AllenFang hacky but it worked.

[AllenFang]

@mbaroukh, I'll thinks about your suggestion, and will open a branch for v3.0.0. Sorry for lately reply, I'm busy on work ;(

[ssjogus]

hey thanks for the next versions. If we can have resizable columns , that will be great..

[ssjogus]

also one more wish -

for filter: can we have a button, clicking on which the filter row opens up..

something like attached screenshot. i did this using jquery.. but it will be good to have in the plugin itself..

Screenshot1 - filter controls hidden

Screenshot2 - on click of icons in the header, the filter row opens

[AllenFang]

@ssjogus, your suggestion is very well, I will consider it :) Thanks you. But it really need some time ;(

[AllenFang]

Following is the proposal for showing how to do custom component:
Firstly, if you only want to custom the button(e.g., insertRow, exportCVS) or search field, you can do it like that:

function generateDeleteBtn(delBtnClick) {
 return (
    <button onClick={ delBtnClick }>MyDeleteBtn</button>
 );
}
render() {
  return(
    <BootstrapTable insertRow deleteRow={ generateDeleteBtn }>
      //...
    </BootstrapTable>
  );
}

However, if you need to customize the whole ToolBar, e.g., add you component, change the layout. You can do it like following:

function generateInsertBtn(onClick) {
 return (
    <button>MyInsertBtn</button>
 );
}

function generateSearchField(onKeyUp) {
  return (
     <input type='text' />
  );
}

<BSTableToolBar style={ { ... } } className={ ... }>
  <InsertBtn component={ generateInsertBtn }/>
  <div style={ { ... } }>
    <Search component={ generateSearchField }/>
  </div>
</BSTableToolBar>
<BootstrapTable toolBar insertRow deleteRow>
</BootstrapTable>

You need to enable toolBar props on <BootstrapTable>, if configured, I will assume you want to customize the tool bar so that you need to render <BSTableToolBar> component and it's body.
Which means react-bootstrap-table does not render insert button depends on insertRow={true}, so insertRow, deleteRow, exportCSV will all invalid. In this situation, you have best ability to do customization.
BTW, I will export e.g., InsertBtn, DeleteBtn, ExportCSVBtn components, if you only want to change the styles or layout on ToolBar and it's easy to be done.

Hope it all works and feel free to discuss for this proposal.
Thanks you :)

[AllenFang]

v3.0.0 alpha todo list

• ToolBar customizable
• Insert button customizable
• delete button customizable
• exportCSV button customizable
• search field customizable
• Remove dependencies on jQuery and bootstrap.js
• Use other modal library instead of native bootstrap modal
• Insert modal customizable
• Selection cell customizable(Released on v2.4.2)
• Size per page dropdown customizable
• Cell edit customizable(Released on v2.4.0)

I know there're some features I miss, but I thinks make the react-bootstrap-table more customizable is most important thing than each other in the future, so if any feature I miss, I'll consider to add it after alpha release.

The branch I've created v3.0.0-dev.
Thanks again :0

[tarim]

Hi @AllenFang ,

How about add new button(for example Save All)?

Thanks,

[joebone]

Re:sorting.. Awesome. Exactly what I need hehe.. Makes you wonder what other "missing" functionality is already there ☺️we are using your table in a react/typescript project and honestly it's done 90% of what we need with no tweaking! The three things I remember being an issue were the sorting(which I see is already implemented hehe), the custom footer row, and a callback when the pagination size changed(we wanted to store the preference in a redux store and persist it).
But all in all, I have to say bravo on a well designed component!

[AllenFang]

the custom footer row

I'll work hard for it :)

a callback when the pagination size changed

check this

[shadeven]

@AllenFang This is a great library. The project we are working on use it heavily for all the tables. However, we noticed the column is not sizeable. If it is too hard to implement, then what would be the work-around to handle long text in table cell? Word wrapping? Please let me know.

[AllenFang]

@shadeven, thanks your feedback, for the long text problem, #497 (comment) is a little feedback, actually, I only make cell ellipsis if text overflow, maybe I can give a try for word wrap, but I remember that I've tried it but got some trouble with unalign column issues. Anyway, I'll have a experiment again because I've fixed couple unalign bug and maybe word wrap is work now ?!

[shadeven]

@AllenFang thanks for the prompt reply. I am looking forward to hear from your experiment.

[AllenFang]

I change this line to normal instead nowrap, and a long text demo result as following:

I also try to configure a narrow width and resize window, it work fine also.(Lucky without any unalign issue happen) If this result is match your expectation, I can forward to support this feature, but for a compatibility design, I'll make this configurable and preserve nowrap still as default.

[shadeven]

@AllenFang This is exactly what we need! Thanks for your hard work! When can we expect this feature released?

[AllenFang]

I think I can support this feature in next or next two version if without any trouble on implementation :)

[shadeven]

@AllenFang Please let me know when it is released.

[Vadorequest]

Hello @AllenFang, thanks for all this!

When is the release of the v3 planned? Is there gonna be a lot of changes between beta-10 and the final release 3.0.0 ? I think it's close to be released so it should be okay to jump on beta-10 right now?

[AllenFang]

@Vadorequest, I'll release it as soon as possible, I'm going to implement the keyboard navigation and integrate the cell editing with tab.

[AllenFang]

v3.0.0 release, I know there still are a lots of thing I need to improve or fix, in near future, I'll pretty busy on my job.. but I'll keep to support this project when I back from my job.

Any feedbacks or bug report is welcome, thanks.

[StephReaves]

@AllenFang thanks for you work on react-bootstrap-table! I'm having issues with the modal in my local environment vs when deployed. When I click on the 'new' button when deployed to heroku nothing happens... There are no errors in the react dev tools. I'm using version 3.0.0 and have imported the css. When running the code on localhost everything works as expected - modal pops up when clicked. Any direction is greatly appreciated. Thanks in advance for your help.

[philjoseph]

Hi @AllenFang - We've start to use your amazing project and use currently 2.11. Is there a description of all additions of version 3? Do you recommend to stay on 2.11 until you officially release 3 or do you think beta 11 is stable enough ?
Thanks for your great work and your advices ?

[AllenFang]

@StephReaves, could you please help me to confirm if you use the v2.x and deploy on heroku is work well?

@philjoseph, I'm going to a travel and I'll update official note for v3.0.0. Actually, I think using the newest version is much better, it support keyboard navigation and customization. Anyway, you can try v3.0.0 and any feedback is welcome, if you dont like it, use v2.11.x is well, they all are stable.

Thanks

[KalpanaPagariya]

HI AllenFang, You have released v3.0.0, but examples are still pointing to jquery and bootstrap. Can you please update the examples also? Like index.html still refers to jquery and bootstrap.

[StephReaves]

@AllenFang thanks for following up. Was able to get 3.0.0 working by changing some configurations in webpack. Thanks again!

Just getting going with React and react-bootstrap-table and I have another question on customizing the modal through insert Row. Basically, I don't want all of the columns to be displayed in the modal. For instance in your basic example, I only will display Product Price as an input options, but not Product Name or Product Id. Would I go about doing this by addressing the insertRow {true} settings? Apologies, but I couldn't find anything related in the docs or in a google search.

One other question, is there a faq or slack channel for react-bootstrap-table where I should be directing my questions?

[AllenFang]

Sorry for lately reply due to my long trip ;)

@KalpanaPagariya, thanks for remind, I forgot it.

@StephReaves
I think you can do it by custom modal, you can control which input field can display on modal, feel free to ask me anything by opening issue on this repo :)

[Siyfion]

@AllenFang I know you've mentioned #220 before and you talked about nesting sorts, this isn't really the main issue as far as I can see. It seems to be a simple "third" state to the sorting, which is "none".

In fact this is precisely what the table does currently if you have no default sort and haven't as-yet selected to sort by anything... It's just that after selecting one, you can't get "back" to the un-sorted state.

[XidongHuang]

@AllenFang thanks your hard working bro!
So are there any solutions about the wrapping of table header and cell?

I tried like this:

<BootstrapTable id='mdm-table' 

containerStyle={{'marginTop': '1em', 'whiteSpace': 'normal', 'wordWrap': 'break-word'}} 

data={data} striped hover search exportCSV condensed pagination options={this.options}>

but only marginTop: 1em works.
And it is not a good choice to change white-space: nowrap in react-bootstrap-table.min.css, so what should we do about it?

Thanks again.

[AllenFang]

@XidongHuang, is this ?

[XidongHuang]

@AllenFang Yes sir, that is what I want, thank you so much!
But a short question here, is it necessary to separate those css styling for each column? Or I can set them in parent container <BootstrapTable /> for the whole table?

[AllenFang]

But a short question here, is it necessary to separate those css styling for each column? Or I can set them in parent container for the whole table?

@XidongHuang You can give a try but I didn't try it before.

[christianbalderrama]

Hi @AllenFang! First and foremost is huge thanks for your library! We're using this library for some quite of time for all of our projects and it works perfectly!

Just want to ask, is there any feature to export one or more CSV with one table? For instance the default exportCSV button is exporting the data that is display on the table but the other is exporting other data.

I was trying to override the options by creating a button group just like this

return ( <ButtonGroup> {props.exportCSVBtn} <ExportCSVButton btnText='Down CSV' onClick={ () => this.handleExportCSVParts() }/> </ButtonGroup> );

However I was expecting that the data inside the handleExportCSVParts function will be exported, data type is array.

Is there such this kind of feature export multiple CSV with one table? Huge thanks!

[AllenFang]

@christianbalderrama currently, we only can export the data from table. if you want to export some data, you can try to write yourself code for exporting csv, you can use filesaver and Blob to achieve your requirement. some example source code you can reference by https://github.com/AllenFang/react-bootstrap-table/blob/master/src/csv_export_util.js

thanks

[koushindra]

As I make remote={true}, filters on each column stopped working

[koushindra]

How can I work with filter in remote pagination