react-bootstrap-table / react-bootstrap-table2 Goto Github PK

Think out of box

The table currently has "headerText" which we can use to display custom text on the Table Header but for the cell I didnt find anything like this to use

Hi @AllenFang,
I think having a state saving feature that saves table's current page, sort column and sort direction would be a great feature for react-bootstrap-table2.

Example

It makes use of localStorage or sessionStorage for it. If these are not supported, browser cookies can be used in worst case.

Let me know your thoughts. Thanks.

Maybe this exists already and I can't find it in an example. But currently I have a table with four defined columns for a "quick view' type functionality, then I use the expand row functionality to show all the additional fields from the row object. Passing that row object in is nice to have I can list all attributes from the object there. But if I want to add a new row using InsertRow I only have access to the columns defined in the table. So using the InsertRow modal I can only get fields for the columns in the table, not all the attributes on the row object. Is there anyway to do this or could this be a feature request?

Example: row shows just first name and last name, expand row shows, address, birthday, phone number, other contact details etc. Clicking InsertRow, modal only shows first name and last name. The columns object passed into the modal only has those 2 attributes. But I'd like the other ones to be there as well for address, phone, dob, etc.

Thanks.

The reason for this is i18n. In the v1 for example, you cannot change the placeholder in the column filter.

Hello~

I came here from the react-bootstrap-table thinking that version 2 was already available. It seems like it's still under development. This wasn't immediately clear to me and possibly for others. It might be worthwhile making it explicit on the homepage for anyone navigating here.

Do you have a timeline for when you expect to release the first version for react-bootstrap-table2?

Thanks and keep up the good work!

Would anyone be interested in a SketchApp file of visual design assets to accompany the react-bootstrap-table2 examples?

Same as noDataText in react-bootstrap-table

Hi @AllenFang,
Making the first column sticky would really help when the table scrolls horizontally so that a reference to the rows can be seen while scrolling as the first column is generally used to hold the identifying element of a particular row data.

A similar example here

I've already implemented it in the fork of react-bootstrap-table. I think this would be a good feature for react-bootstrap-table2.

See: https://www.w3schools.com/TAgs/tag_caption.asp

I am thinking that it should allow a React element or a string. With element you could put custom stuff inside it, or for example styling.

See WIP test screenshot:

can you please implement right click on this library.it has great features but only this thig is missing i am trying to implement by using
below as the reference
https://www.npmjs.com/package/react-contextmenu
but somehow i may not able to implement it on this library.if anyone have any idea please help me.
thanks.

filter option for DateBetween to prompt for 2 dates? >= Date1 and <= Date2

if this does not exist ...
there should be no need to prompt for comparators unless you want >= vs > and <= vs <. default to both and allow to override to just use 1 of the option?

if it does exist ...
please send me in the right direction :)

thanks

1. options.onEditing should accept a async operation

Additional: Support default/auto validation when saving cell

Like headerTitle and columnTitle in react-bootstrap-table

I have tried react-bootsrap-table. It's really good except it doesn't support autocomplete component. In your design of table, for header and row, you guy used a lot of "over-flow: hiddend" to style. It's the reason why autocomplete cannot combined in this kind of table.

Feature idea.

In order to make the responsiveness of table better, we could add a flag that enables the table to be shown in key-value mode. See examples: https://css-tricks.com/responsive-data-tables/

This can be of course achieved with CSS, but it would be a better idea to provide a solution for it in the first place.

When i do a snapshot , it should give me the current state of table snapshot(screenshot) of the table as pdf/image ?

Hi! Cool, that you decide to make a 2nd version of this table component!

Not sure if it implemented in the last version of react-bootstrap-table, but it would be cool to have a summary row as the last row of the table. And(or) a custom footer component for a table.

Thanks!

Currently, column.editable only accept to receive a bool value to perform if this column can be edited or not. But I hope column.editable can accept a callback function to allow user to decide if a cell can be edited or not.

HI Allen,

I suggest that your new version of react-bootstrap-table be pure Flexbox, which means supporting only Bootstrap 4 and not Bootstrap 3.

Bootstrap 4 is pure Flexbox.

It's a good idea because supporting two radically different layout engines will end up being a nightmare for you.

Better to leave react-bootstrap-table version 1 as Bootstrap 3, and make react-bootstrap-table version 2 support only Bootstrap 4.

Refer here:

twbs/bootstrap#21389
twbs/bootstrap#19901

Thanks

@Chun-MingChen

please implement attrs and headerAttrs on cell and header cell.

attrs and headerAttrs allow user add some HTML attributes on elements

Hi @AllenFang,
I was wondering why I don't see a "edit row" option, only edit single cells. Am I missing something?
Do you think that would be useful?
As default implementation a simple Modal holding the current row field values, opened with a "Edit" button in the toolbar, would work fine and should easy to implement.

Any tips on how to implement it in the current react-bootstrap-table version?
Thanks, and keep up with the awesome work! 👍

Implement column formatter, like dataFormat on TableHeaderColumn in react-bootstrap-table

@Chun-MingChen I remember you have five star on your photoshop skill right? is it possible to design a new logo for react-bootstrap-table2 ?! lol 🤓

@AllenFang I'm aware you've selected storybook for building examples. But as we are still at an early stage in react-bootstrap-table2, would it be possible to use React styleguidist compared to storybook?
They offer great configurations and support JSDoc comment transformation to prop tables. Example.

I'd be more than happy to build examples from scratch using react styleguidist.

Thanks.

I was wondering can we get rid of bootstrap alltogether, isn't it used only for styling the table to look better?

Bootstrap.min.css at least contains redundant CSS styles for the project. In fact the table should be merely a React-table (well, a better name of course...) IMHO.

I would like fix few columns where when user scrolls horizontally, fixed columns remains same but scrolls with the vertical scroll. Could you please help me getting feature IN.

Be careful for the column.formatter

Like headerAlign and dataAlign in react-bootstrap-table

Same as dataSort on TableHeaderColumn in react-bootstrap-table