I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
I have a solution for tables in draft-js that works pretty well for us. I do not use separate editors for each cell, just regular EditorBlocks that are all part of the main editor tree. There's a working example here https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte
I have a "TableCell" custom block type that primarily just renders a standard EditorBlock, but uses React.createPortal to render into the applicable table cell.
The information necessary to recreate the table structure is stored in the metadata of the first cell of the table.
When rendering the first block, I render its EditorBlock component wrapped in the full DOM structure of the table. The <th>/<td> tags for all but the first cell are empty, but are given a data attribute corresponding to their position in the table.
Then I use ReactDOM.createPortal when rendering each of the subsequent TableCell blocks into the correct position in the table.
As far as draft-js is concerned it's just rendering blocks in the usual linear fashion. This makes editing, managing selection state, & the import/export of html no more difficult than for any other block type for the most part. Though you do have to take precautions with selections and editing that cross into or out of the table.
I am using nested Editors in each cells (option 1). Implementing style functionalities inside each cells is much easier. You can use the functionalities you've already use in the 'main' Editor.
There are two main components in my implementation of table. The Table component, a custom block component. And inside each cell of that component is the Subeditor (a nested Editor component). The EditorState for each Subeditor is stored in a Redux store.
Selection handling between editors is quite a handful though.
Related
I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
I have a material-table component where I am rendering a nested materiel-table in the detail panel of each row. I would like to know if there is a way to include detail panel material-table rows in the functions offered by the package. I am mainly interested in the selection feature for now, but will likely need the same support for other functions like filtering, search, etc...
Now I know that Tree Data allows this since all rows are part of the same table. But I need to be able to do it with using the Detail Panel.
NB: For more clarity, here is a code sandbox I found with the nested table functionality.
So how would one go about adding their custom select function to a material-table, such as to include selected rows inside nested material-tables ?
The way to control the row checked state outside of the table, meaning without using the provided check box inputs, is demonstrated in a demo created after I asked the same question in the material-table-core repo. It's pretty straight forward and should help anyone trying to do the same : https://material-table-core.com/demos/selection/outside-of-table/
I am using angular-ui-grid 3.1.1 with 25,50,75 records at a time.
Each cell is having different celltemplates e.g, onclick popovers, hover popovers, file download links, data with profile images, data in nested table etc.
Data is rendering fine in the grid, however for some seconds ui grid becomes unresponsive.
Also i have created an external column chooser. While choosing a column to show/hide, the grid becomes unresponsive for some seconds.(same unresponsive behavior seen with in-built column chooser provided by ui-grid)
Please suggest any fix for this.
sadly, we've had to abandon UI grid for these same sort of issues. The issue, however was not in UI-Grid but in angular lacking performance. In my case I built a grid with ReactJS that I created a angular JS directive wrapper to put over. Even by just putting angular HTML with lots of rows/columns it wasn't fast enough. The last thing you could try before swapping away from UI-Grid would be looking into row/column virtualization if you dont already have it enabled. Here is the option to test
columnVirtualizationThreshold
If you wont change the scope variables, try one-way-data-binding in your templates, it will give you some performance like:
<span>{{::variable}}</span>
IMPORTANT!: Be careful because it wont update data any more until you refresh the view.
I've created a database-driven hierarchy table with 3 hierarchy levels. It works almost exactly how I want it to, but the javascript code that drives its functionality is UGLY. I would like to re-write some of it, but I don't quite know how. I imagine I'll have to use recursive functions, but there are some strange business rules that may make it more difficult than I imagined. Can you make any suggestions to simplify my current code (in particular, the ActivateRow() function)? See fiddle.
Note that there is some funky use of hidden fields due to ASP.NET Web Forms postbacks and losing input values, but there are some useful data-attributes written into the HTML such as data-region-id, data-subregion-id, data-market-id, and data-hierarchy-id. the main requirements are below:
There are two tables - the first is linked to the second, so all actions on the first table should be carried out on the second table as well (though the second table is slightly different).
Three levels of hierarchy. The highest level (Region), a middle level (Sub Region), and a final level (Market)
Row activation enables all controls in a given row. If the activated row is a Sub Region row, it deactivates its parent Region row controls and its sales values sum up to the Region level. This does not apply to activating a Market row.
Similarly, row deactivation should disable and clear all controls within that row. If the row is a parent row, it should clear all children rows and disable their controls as well.
Deactivating all children of a parent row should deactivate the parent row and clear all parent row controls.
Surely, there's a better alternative. Am I reinventing the wheel? Is there anything out there that I could use to improve my spaghetti code? I realize this isn't the best question for Q&A format - is there somewhere else I should ask my question?
It is not entirely clear what you are doing but from what I gather you have some kind of table you are filtering.
Also, you are using ASP.NET webforms.... so sorry for you.
I would not use any kind of form binding controls offered by ASP WebForms, because it is now obsolete, incorrect and very painful.
Instead, create an AJAX enabled page [WebMethod] that returns all the data or filtered with a parameter, what ever, in JSON (Because JSON is easier to read and debug, and much faster than XML)
Go and find the jQuery plugin DataTables. Everykind of functionality is built in and extentable, it works great, super efficient client side, with varios filtering and searching capabilities.
You either create a new model on the Server side and remap the data server side, or dump your existing model and remap it on the client, either way, you just plug JSON data into datatables.
Saving back to webforms is slightly more tricky (compared to MVC/Razor) because you have to take the String and deserialise it to your model, its a few extra lines but I do this all the time and you can carry on with your business logic.
I'm quite new to Pentaho dashboard develop and i have a problem with the component style.
For example, I added a table component to my dashboard.
In the "Advanced Properties -> Style" option of this table component, I select "bootstrap". Okay then the table component is automatically added some bootstrap style classes.
But, I want to remove one of those classes. I want to use jQuery.removeClass() to implement this but I don't know where should I put my js sentences.
Further more, if i want to do some other operation towards the generated table component using js, where should i put my js sentences.
I do not understand the workflow of pentaho cde dashboard so this question may seems a little silly. Thank you for your time!
You can put your code in Draw Function.
=> Your using Table component. By using java script code or jquery code you can manipulate the data in table component.
Example:
1. You want to sum of the row values.
2. You can hide the columns and rows.
Note: If you put some code in draw function. table component has convert sql result in to HTML table. Its like a normal HTML table.
Thank you.