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:

   492, #469, #476, #356, #251, #172, #487, #484, #462, #456, #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 https://github.com/AllenFang/react-bootstrap-table/issues/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 :+1:

[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

• [x] ToolBar customizable
• [x] Insert button customizable
• [x] delete button customizable
• [x] exportCSV button customizable
• [x] search field customizable
• [x] Remove dependencies on jQuery and bootstrap.js
• [x] Use other modal library instead of native bootstrap modal
• [x] Insert modal customizable
• [x] Selection cell customizable(Released on v2.4.2)
• [x] Size per page dropdown customizable
• [x] 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,

[abhirao]

@ssjogus I was able to use react-resizable to create resizable columns for react-bootstrap-table. Try it out to see if that solves your problem. Let me know if you would like me to share a gist example.

[AllenFang]

@tarim, it's in the scope of ToolBar customizable, actually, I'll give you more ability to do anything.

[ssjogus]

@abhirao thanks for the plugin suggestion. but will it work with the columns? i dont want to resize the whole table, but the columns should be resizable..

[AllenFang]

@ssjogus, the resizable columns is a big challenge in react-bootstrap-table, I'm not sure that I can support this feature, sorry ;(

[jdneo]

Hi, @AllenFang

How about make the row selection has the number limitation ( i.e. the total number of rows that are selected should no more than two or a customized value) ?

Thanks a lot.

[AllenFang]

@jdneo, check this. You can manage the selection externally, so you can handle the restriction of selection in your component

[jdneo]

@AllenFang Thank you so much. This really helps me a lot!

[kadariyp]

@AllenFang How about lazy loading or performance issue? suppose i need to render 2000 rows of data, i wish to do it on user scroll rather then do it at one go. But the search needs to be on whole data set and not just the one shown. So if you can think about it in your next release? Thank You

[AllenFang]

@kadariyp, #566 has tried to solve the performance issue, I'm going to review it, if ok, I'll think about to merge to v3.0.0. BTW, I dont want to support lazy loading in near future, so PR is welcome :)

[orangecoding]

I would love to see an Infinite Scrolling Feature. Something like I give the table an array with like 10.000 rows but it only displays 100 and then it loads the rest dynamically.

[AllenFang]

@orangecoding, I'll try my best to do this, but I focus on making component more customizable currently. so PR is welcome

[kadariyp]

@AllenFang Is there a way i can group the table by certain data type? If not, will this be supported in near future. I know the sorting would be weird but without sorting and just grouping the table rows with certain data types would be a good one.

[ryanwisniewski]

A footer for column totals would be great!

[abhirao]

I need a grouping feature as well (including column totals). I was planning on putting together a proposal for the API - I would want it to work on local data or when provided with data from remote source.

@AllenFang I can get a proposal together and work on a PR.

[patrickgordon]

@orangecoding @AllenFang - could look at something like react-virtualized for that functionality.

[dev-dreamsmart]

@AllenFang i need to add a last column with 2 button (Edit & Delete) on every row

[ghost]

@AllenFang Great plugin Allen. Very useful. Not sure these suggestions are still live. I've got one suggestion.

• Edits in a modal window that would allow validation

Thanks again for a great plugin

[AllenFang]

@g3blv, check #736 may help you :)

[AllenFang]

Done for Merging https://github.com/AllenFang/react-bootstrap-table/pull/661 for some customization for pagination.

[gforge]

Thanks for an awesome package. I'm using bootstrap 4 that has dropped glyphicons. Are you planning to move to Font awesome or similar?

[AllenFang]

@gforge, good idea, but I think this need to be delay, I would like to release v3.0.0 as soon as possible, if I have time, I'll change to Font awesome.

BTW, PR is welcome :)

[gforge]

Great, I added the basic Font Awesome structure (basically done search-replace). Update: npm start crashes when accessing localhost:3004 due to old react-router dependency. Updating to version 2.8.1 solved this.

What do you want me to test before doing a PR? Also, adding something to the README is probably a good idea as people have to add an additional FA dependency.

[oeph]

@abhirao could you please provide a gist for your example with react-resizable?

[j-francisco]

@AllenFang It would be nice if we could pass a 'disabled' prop to DeleteButton. That way we could enable/disable the button based on some criteria, such as if any rows are selected. Right now the button is always enabled even if no rows are selected, which is kind of a UX issue.

[AllenFang]

It would be nice if we could pass a 'disabled' prop to DeleteButton. That way we could enable/disable the button based on some criteria, such as if any rows are selected. Right now the button is always enabled even if no rows are selected, which is kind of a UX issue.

@j-francisco, thanks, it sounds good!!

[jdelafon]

Adding resizable columns is probably a nightmare, but maybe supporting multi-line content (automatically expanding rows in height when some content does not fit in a cell) is easier and actually more useful (I hate drag and drop and you are never guaranteed to see the end of the string on your screen). Or is it already possible? Real-life, useful example:

(but it could also set all table row heights to the highest).

[AllenFang]

hi @jdelafon, I think it's more better than resizing column and maybe it's possible to implement, but need some time to implement it with react-bootstrap-table.

[patrickgordon]

Yeah +1 for multi-line content rather than resizable columns 👍

[kakariko-village]

@AllenFang: option to move item per page to the top of table is cool.

[Guigoz]

@jdelafon For multi-line content, you should be able to do it only with CSS :

.react-bs-table .table .tbody {
  .break-word td,  tr .break-word {
    white-space: normal;
    word-wrap: break-word;
  }
}

And set the following option on BootstrapTable : trClassName: 'break-word'

[kakariko-village]

Any chance for Auto Paging Load?

[AllenFang]

Any chance for Auto Paging Load?

could you please explain more?

[kakariko-village]

@AllenFang: Next page auto load when scrolling down to bottom of the page. E.g: http://jscroll.com/