Is there a way to have the footer in React-Table update based on the filtered data? I am trying to put a footer that sums a column and changes as the data is filtered.
***Update:
I added an answer below of how I got this to work. You can also view the full code of my working table here:
https://github.com/travisdock/pf-frontend/blob/master/src/components/table.js
For anyone curious how I ended up doing it here is my code:
Footer: columnProps => {
return(
<span>
{columnProps.data.length > 0 ? this.sumEntries(columnProps.data) : 0}<br></br>
{columnProps.data.length > 0 ? this.averageEntries(columnProps.data) : 0}
</span>
)
}
It turns out Footer can receive a prop of columnProps which has the current data displayed in the table and updates when a filter changes the data. I added a total and an average value to two lines of my footer and it works wonderfully.
Of course there is!
Just use a state attribute as content of the footer. Now if you alter this portion of the state, react will render all components (again) that use that state attribute. For more information please read "State and Lifecycle" from the react documentation.
Related
I am trying to get the active item from this menu list to display in a different style. When I reload the page, the style gets applied for a split second, then disappears and all items share the exact same style.
There is a similar thread saying the solution is to actually have the item available as a data property in that component. I have tried that too, and it would not work. It makes more sense to have all the data from a computed property since I am using Vuex for data storing.
The template:
<li class="topic"
v-for="topic in topics"
:key="topic"
#click="selectTopic($event, topic)"
:class="{'active': topic === current}"
>
{{topic}}</li>
and the script:
computed: {
topics: function(){
return this.$store.state.topics
},
current: function() {
return this.$store.state.current_topic
}
},
The current_topic is updated with the selectTopic method in this component. It all works fine, except I can't get the current_topic to have a distinctive style.
Oh, on the styles I simply have .topic.active {border:yellowgreen solid 0.5em;}. If I do topic:active then the style gets applied when I click but only for the time I am clicking (also if I hold), but it does not get applied when reload not even for a split second.
Any leads? thank you :-)
Just as a conclusion / closing of this thread. The code I presented is correct. The problem had to do with a getter which was converting the current_topic into a title. This is why topic and current did not match inside the class binding. I figure it is still worth leaving the thread since it might be helpful for somebody else dealing with class binding inside a v-for.
I'm using the full-calendar component for Angular and I want to customize the content of each date cell according to different conditions. For example if the date is invalid (I have a function that validates the date), I want to change the date's cell background color. Otherwise, if its valid I want to add a plus button inside to add events. Besides that I want to add custom animations and hover effects.
How can I take control of the date is being render ?
I manage to change the background color with dayCellDidMount hook:
dayCellDidMount: (arg) => {
if(!this.dateIsValid(arg.date, arg.isPast)){
arg.el.style.backgroundColor = "#eeeeee";
}
},
I don't think that's the best way to do it and I still can't manage to add the plus button inside the cell.
Can someone achieve this or something similar? Your help would be appreciated, thanks.
If you know another calendar to integrate with Angular that has this features I'm open to suggestions.
I am using wenzhixin bootstrap table with server side pagination. My table has two special column(First column for row Guid row id, Second column include two button for each cell)
My problem is, I should hide first column content because I don't want to see all Guid id by Users. Moreover, My table data coming with server side pagination. I couldn't button with html code for second column.
How can I add custom column for server side pagination or how can I add attribute to all cells in the first or second column?
To hide a column, you can use either JavaScript command after the bootstrapTable('load',..) if you used that, or in a document ready block:
$table.bootstrapTable('hideColumn', 'name')
shown on Bootstrap-Table site: bootstrap-table.com: showColumn-hideCoulumn
or if defining within the table, add data-visible="false" to the column you wish to hide.
bootstrap-table.com: column-options visible
i.e.
<table id="table"
data-toggle="table"... >
<thead>
<tr>
<th data-field="id" data-visible="false" >ID</th>
For the buttons - I am not sure what type of project this is for - but I solved this by adding link buttons to the table rows via data-formatter - read up on this on the API documentation bootstrap-table.com/docs/api/column-options/#formatter
I used the examples found on github.com/wenzhixin/bootstrap-table/issues/1765 - under Format -> 'Basic Format' - which shows how to add a link (button via Bootstrap CSS). To make the link specific to a row, use row[] to get a field value, or you can even use the id column instead of hiding it, if that is your field (use 'value' instead of row[] then - see examples).
I did mine something like:
<th data-formatter="buttonFormatter">View Links</th>
then in the javascript <script> block:
function buttonFormatter(value, row, index) {
var id= row["id"];
var url = "https:/...&id=" + id;
return 'View';
}
These are based roughly on stuff I've been doing recently - haven't tested these examples, but should give you a good start if you haven't already figured it out...
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
I want to save the list of hidden columns so that next time when the table is loaded I show the table with the same set of column which the user chose to see in the past. Is there a way to get a list of all hidden columns in bootstrap-table library.
You can use the cookie extension to solve your problem, here is an example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html.
The plugin saves:
Sort order
Page number
Page number from the list
Visible columns
Search text
Docs here: http://bootstrap-table.wenzhixin.net.cn/extensions/#table-cookie
you can use the jquery datatables plugin to easily handle this problem, this plugin auto generate the table columns and show that.
you will get more information from link below,
https://www.datatables.net/
hope it helps.
try this below
var tab = $('#table').bootstrapTable('getHiddenColumns');
$.each(tab, function(index, value) {
alert(value.title);
})