I would like to use one of the many table/data-grid components available to render a table. However, I am struggling to choose one as I have very specific requirements and I'm not sure if they are supported by them.
Ok so ideally I would like the table to initialise with only column headers (which are populated by data from a database). I would then like to be able to add a row (by clicking on a button), and be able to enter data into the cells and then save the data in that row to my database. The column headers are generated by form but there can feasibly be any number of them. Most of the examples for the various components seem to expect you to already know what your data is before you render the table. But this will not be the case for me.
I was considering Griddle but they don't have an editable cell option yet (it's only part of the roadmap) so unless I create my own custom function, I think that that is out for now.
I was just hoping for some guidance is choosing the best component for what I need!
Thanks for your time
Related
So, im working on a web app to help parents track their children's vaccination schedule. For that I may need some type of table where operations can occur in the cell level, for example clicking in a cell and show a place to set the vaccine as taken and reflect that in the specific cell of the dose of that vaccine and set it as green. Is there a library or anything that can help me accomplish that?
react-table offers headless utilities for managing your tables state. Here is an example implementing editable data. Link
I'm new on reactjs, and I want to create a table to show some data. In the project I'm working, we are using Ag-Grid datagrid.
I already have created it with basic usage, but my question is:
Supose I have 100 rows as enter, how I can display in datagrid just the 10 firsts?
I stil wanna load all data (for filtering, sort, etc), just don't wanna show all by default.
I'm looking at documentation and do some search, but don't find the proper way to do it.
Edit: I already see the pagination options (the default solution provided by documentation), but in my case, at least for now I don't want pagination. Just wanna render the X first rows (the extra will be ommited in table, but have to be loaded in UI, if not, I could use autoHeight).
Thanks in advance.
I'm assuming you are using the Client Side Row Model and not loading data from a Server. In which case, the easiest way to achieve this would be to show the 10 rows, and add more rows (depending on when you want to load them) via Transaction Updates, please see the documentation on this here
you can use pagination:
documentation reference
I am using ag-grid enterprise in my project where i am inserting data into the grid. Once the editing of data is completed i am pressing submit button to save the entries in the backend. Before saving there are some validations which i am performing by passing gridApi to the method and there gridApi.foreEachNode i am validating the data. I have a new scenario where if all the cells of the row is empty. The row should be deleted so that user should not have to delete every empty row before submitting. how can i delete the row node inside foreEachNode?
I recommend that build up an array of row ids for the empty rows as you iterate through forEachNode, and then once you are done iterating, use the ids from the array to delete the rows.
However, I'd like to recommend an entirely different approach...
That is, don't treat the grid as the "source of truth" for your data.
Rather, keep a data model in your application, and use the grid just as a visual component (though a complex one), that represents the data in your model.
React is particularly suited for this, as you can use, e.g. Redux to represent your model and provide operations on it.
In this scenario, you would do these operations on your model, and then update the grid with the new value of your model. And your model would then be in a good state to send to your back-end.
I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
Based on a filter we use (show my objects / show objects of all), we would like an optional column to show/hide (if "all objects" is chosen, it should have an additional column indicating what account it belongs to...)
I know we can add the filter, and it is passed along to the data method so I can retrieve the data from the server there, but can we force a column refresh on the grid somehow?
Thanks very much for your assistance and feedback!
Columns are currently set only once, on initialization. There are a couple of related feature requests on UserVoice, where you can vote and participate in the discussion:
http://fuelux.uservoice.com/forums/181290-general/suggestions/3624683-datagrid-should-be-able-to-hide-show-columns
http://fuelux.uservoice.com/forums/181290-general/suggestions/3964374-provide-a-method-to-re-render-the-datagrid-in-full