react-bootstrap-table / react-bootstrap-table2 Goto Github PK
View Code? Open in Web Editor NEWNext Generation of react-bootstrap-table
Home Page: https://react-bootstrap-table.github.io/react-bootstrap-table2/
License: MIT License
Next Generation of react-bootstrap-table
Home Page: https://react-bootstrap-table.github.io/react-bootstrap-table2/
License: MIT License
Like headerTitle
and columnTitle
in react-bootstrap-table
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:
options.onEditing
should accept a async operationAdditional: Support default/auto validation when saving cell
Would anyone be interested in a SketchApp file of visual design assets to accompany the react-bootstrap-table2 examples?
Be careful for the column.formatter
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!
When i do a snapshot , it should give me the current state of table snapshot(screenshot) of the table as pdf/image ?
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.
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.
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.
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
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! ๐
Same as dataSort
on TableHeaderColumn
in react-bootstrap-table
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.
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.
The reason for this is i18n. In the v1 for example, you cannot change the placeholder in the column filter.
@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 ๐ค
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.
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.
Implement column formatter, like dataFormat
on TableHeaderColumn
in react-bootstrap-table
Same as noDataText
in react-bootstrap-table
@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.
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.
Like headerAlign
and dataAlign
in react-bootstrap-table
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
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
Think out of box
@Chun-MingChen
please implement attrs
and headerAttrs
on cell and header cell.
attrs
and headerAttrs
allow user add some HTML attributes on elements
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!
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.