Pop up menu in React Data Tables - reactjs

I want to implement this pop up menu in my project (the three dots that appear to the right of every row in this story):
https://jbetancur.github.io/react-data-table-component/?path=/story/custom-styles-google-sheets-esque--google-sheets-esque
I'm as good as inserting a component as a column that repeats on each row, but I don't know how to build the menu itself.
Looking at the code, it seems that the key is in the CustomMaterialMenu from '../shared/CustomMaterialMenu' component, but I can't find its source code, I don't know if it's part of React Data Tables or something trivial.
Thanks

Related

React, Component that edits the HTML of the next component?

I have a strange case.
I must use a table library that has few features. There is no way to use react-table or more popular libraries.
I need the following feature => In the first column there are icons. If someone clicks on this icon, a new <tr><td>xyz</td></tr> should appear straight after this row.
It's a sort of tooltip, but instead of appearing on top of other content it should "add itself" between the row it has been triggered from and the next row.
I have no idea how to approach that.
The only things I have access to is the row index of the row the model was triggered from.
Is it feasible in React to create a component that somehow pushes a <tr> after the current td closes?
I am wondering if in react it's possible to manipulate HTML in a similar way, no matter if it is a bad practice...
Or maybe somehow running plain JavaScript is the only solution?
Any idea that helps me find a solution would be much appreciated.

React Slick - slickToGo doubts

I'm trying to use React Slick to display several cards.
I want that on entering the page with the slider this will slide to the selected/highlighted slide.
But I cannot find a way to get an index or identifier from the react-slider, maybe I'm missing some information.
All the examples show a way to track slides, but for my case (at least I think so) I'll need to have them already indexed so I can target the one I want. Any ideas?

React Update certain values after initial rendering

I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.

React - Data tables with React

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

Conditional Formatting based on layout view

Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.

Resources