How to re-render/refresh the table content? about active-table HOT 16 CLOSED

You can now insert/remove rows/columns via the updateStructure method that is available in 0.3.14.
The method has the following type:

updateStructure(updateObject: UpdateObject)

type: UpdateObject {
  structure: 'row' | 'column';
  isInsert: boolean;
  index: number;
  data?: (string | number)[];
}

As an example you can use it like the following:

tableElement.updateStructure({structure: 'row', isInsert: true, index: 1, data: ['data1', 'data2', 'data3', 'data4']);

The documentation for updateContent and updateStructure will be updated in the coming few days.

from active-table.

Hi @fluxxus, I don't think I quite understand what you are trying to achieve. Could you elaborate what you mean by number of rows, are you referring to the number beside the 'number of rows' text in pagination, or are you referring to the index column on the left?
Images to help illustrate the problem you are having and what you are trying to achieve would also be helpful.

Thanks!

from active-table.

@OvidijusParsiunas Thx for the reply. Sorry for not being clear, by rows I mean the index column on the left.

Hopefully it will be clearer with these code snippets.

// This is on page load. I get the number of rows dynamically and it works
let activeTable = document.querySelector('#active-table')
let dataHeaders = ["Star Name", "Constellation", "Star Date", "Message", "Delivery"];
setTimeout(() => {
    let rows = new Array(Number(quantityField.value))
    let dataContent = [] 
    for(let i = 0; i < rows.length; i ++){
        rows[i] = new Array(5).fill("")
    }
    rows.forEach((row) => {
        dataContent.push(row)
    })
    dataContent.unshift(dataHeaders)
    activeTable.content = dataContent
})

What I would like is the following. On click event update the number of rows because quantityField.value has changed. That value determines the number of rows in the table - let rows = new Array(Number(quantityField.value))

someElement.addEventListener('click', () => {
     // update active table with different number of rows
})

And here is the HTML part with active-table:

<active-table id="bulk-active-table" 
files='{"buttons": [{"import": true}, {"export": true}], "dragAndDrop": false}'
tableStyle='{
"borderRadius": "4px",
"boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
"width":"100%",
"fontFamily":"filson-pro"
}'
headerStyles='{
  "default": {
    "backgroundColor": "#f9f8fd",
    "fontWeight": "400",
    "fontSize": "18px",
    "color":"#262560"
  }
}'
isHeaderTextEditable="false"
displayHeaderIcons="false"
filter= "false"
displayAddNewColumn="false"
customColumnsSettings='[
{ "headerName": "Star Name", "defaultText": "your star name", "isHeaderTextEditable": false },
{ "headerName": "Constellation", "defaultText": "choose constellation", "defaultColumnTypeName": "Select Constellation", "isHeaderTextEditable": false },
{ "headerName": "Star Date", "defaultText": "any past or future date", "defaultColumnTypeName": "Date d-m-y", "isHeaderTextEditable": false },
{ "headerName": "Message", "defaultText": "personal message", "isHeaderTextEditable": false },
{ "headerName": "Delivery", "defaultText": "delivery address", "isHeaderTextEditable": false }
]'
columnDropdown='{
"displaySettings": { "isAvailable": false}
}'
customColumnTypes='[
{
  "name": "Select Constellation",
  "select": {
    "dropdownStyle": {"border": "0.5px solid #00000066"},
    "optionStyle": {"textColor": "#606060"},
    "options": ["Aquarius", "Aries", "Cancer", "Capricorn", "Gemini", "Leo", "Libra", "Pisces", "Sagittarius", "Scorpio", "Taurus", "Virgo", "Phoenix", "Piscis", "Cygnus", "Equuleus", "Auriga", "Cassiopeia", "Andromeda", "Cepheus", "Coma Berenices", "Canis Major", "Columba", "Microscopium", "Canes Venatici", "Pictor"],
    "canAddMoreOptions": false
  }}]'
></active-table>

from active-table.

The table currently doesn't offer a way to programmatically add/remove rows/columns. I think it would be a great feature to have. I will see what I can do to implement it.

Just to confirm would the addition of something like above be useful for you?

from active-table.

Just an up-date, I am working on a render method that will allow you to update all of the table based on the new content, will keep you posted on the progress (should hopefully have it done by today).

from active-table.

Regarding render method, amazing, that is great to hear!

And to answer your previous question - the ability to programatically add/remove rows and columns would be super useful,
much easier to cover various use cases with that baked in. At least that is my thinking, but I assume many others would agree on this.

Appreciate your efforts, thanks once again!

from active-table.

Hi, I have updated the component to have a renderNewContent: (content: (number | string)[][]) => void method that will completely update the new data. This is included in the ActiveTable version 0.3.9.

The reason why I haven't added a simple 'refresh' method is because it would just have to remove the element and refresh its state - which is redundant as developers can just do this by removing and adding the component again. Hence, to make it easy to update bulk content programmatically, they can use the renderNewContent instead.

Please try it out and let me know if it works for you the way you need it!

I also plan to include a way to add/remove columns/rows programmatically, and will likely have to refactor the updateCell method to keep the API clean. Hence, I will update the documentation when this is all done.

If you experience any issues or have suggestions for other features please let me know!

from active-table.

I will keep this thread open until all of the matters discussed here have been updated in the documentation.

from active-table.

Hopefully you'll notice this before using the previous version, the renderNewContent has been renamed to updateContent in version 0.3.10 to keep it consistent with updateCell.
I will update this thread if there are other API changes.

from active-table.

Hi, all of the above sounds great! I will try it out first thing in the morning and get back at you with feedback.

Thanks a ton!!

Edit: Did a quick test with 0.3.10 and it works like a charm :)

from active-table.

It looks like there is a little bug when using pagination with updateContent.

If there are more rows than rows-per-page, the numbering is messed up. The second row index is always wrong, let's say I add 21 rows then the second row has 20 instead of 2.

And the table always starts at second page, not the first one. I can provide more info if something is not clear.

Thanks

from active-table.

Hi @fluxxus, thankyou very much for letting me know about this issue!! I will get to my computer in a couple of hours so I can investigate it then. If you find anything else in the meanwhile please let me know!

from active-table.

This bug and a couple of other small ones that I have identified along the way should now be fixed in version 0.3.12. If you see anything else that is irregular please let me know!

from active-table.

@OvidijusParsiunas It is hard to keep up with the speed of updates you are rolling out!!

I'll check out the new 0.3.14 version tomorrow, updateStructure looks super handy.

Just an aside, I am curious what are your thoughts on adding responsive options on component render(for example to change Header font sizes easily)? Something like matchMedia would work I guess?

I get it that the benefits are not so great, since all of the tables, data tables etc. are really clumsy to use on smaller screens, so I am just asking - it is not that needed IMO.

from active-table.

When it comes to responsive design - the component offers a few ways to help keep the styling relative to the screen size, you can use the tableStyle property with % based dimensions (width/maxWidth) and set the cell font size using em/rem metrics inside the cellStyle property. Additionally, the values for these properties can be precomputed by the parent app - so if it detects that the screen width/height is below a certain number, it can make these values smaller before they are set.

matchMedia is a great suggestion, but unfortunately I can't think of a simple way to implement it that would still facilitate the flexibility of allowing the developers to control which elements' are going to be styled, not to mention the fact that there would be collisions with the stylings that can be set using the properties above and the component would need to constantly re-run the media queries when screen size changes. Nonetheless, if developers like media queries, they can be implemented using the auxiliaryStyle property, e.g.:

`
  @media (max-width: 600px) {
    .cell {
      font-size: 10px;
      height: 38px;
    }
  }
`

If you have suggestions for other responsiveness features/improvements, I am always happy to consider them and see if I can fit them into the existing API ecosystem! Also, if you have any questions about these kind of features I am always happy to discuss them!

Thankyou!!

from active-table.

The documentation has now been updated with all the features discussed in this thread.

I will be closing it with this comment, however if you discover any issues, have questions or suggestions for improvements regarding them, feel free to continue commenting here, for everything else you can create new GitHub issues and I will look into them as soon as I can!

Thanks again @fluxxus ❤️, your feedback was invaluable to helping this component become better!!

from active-table.