how to sum selected columns in data table #839
-
Questionwith table filter bound to text input. how would I add a tally row at the bottom of the table that sums up the values in the 'Concrete Area' column of the filtered table? the code is: class State(BaseModel):
filter: str = ""
state = State()
filter = ui.input(label="Filter Table", placeholder="filter text").bind_value(state, target_name="filter")
table = ui.table(columns=columns, rows=rows, row_key='name').props(add="wrap-cells=true").bind_filter_from(state) thanks in advance |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
Maybe something like this? columns = [
{'name': 'name', 'label': 'Name', 'field': 'name'},
{'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
{'name': 'Alice', 'age': 42},
{'name': 'Bob', 'age': 23},
{'name': 'Charlie', 'age': 17},
]
with ui.table(columns=columns, rows=rows, row_key='name') as table:
with table.add_slot('bottom-row'):
with table.row():
with table.cell():
ui.label('Total age').classes('font-medium')
with table.cell():
ui.label(sum(row['age'] for row in rows)).classes('text-right font-medium') |
Beta Was this translation helpful? Give feedback.
-
As mentioned above, the Quasar QTable has several computed props that would be extremely useful if there was an easy way to access them. Would it be possible to add/adapt the following methods within the table.js element directly? (Based on https://stackoverflow.com/questions/68246230/quasar-q-table-how-can-i-get-the-filtered-or-sorted-rows) methods: {
filteredSortedRows() {
return this.$refs.qRef.filteredSortedRows;
},
computedRows() {
return this.$refs.qRef.computedRows
},
computedRowsNumber() {
return this.$refs.qRef.computedRowsNumber
},
}, These JavaScript methods could then be accessed through a ui.table by adding corresponding properties in the table.py Table class (sub-classed below with my local copy of mytable.js with the above methods embedded): class MyTable(ui.table, component='mytable.js'):
@property
async def filteredSortedRows(self) -> List[Dict[str, Any]]:
return await self.run_method('filteredSortedRows')
@property
async def computedRows(self) -> List[Dict[str, Any]]:
return await self.run_method('computedRows')
@property
async def computedRowsNumber(self) -> int:
return await self.run_method('computedRowsNumber') |
Beta Was this translation helpful? Give feedback.
The problem is, that the filter is evaluated on the client and currently the result is not sent to the server.
We can try to reproduce the filter on the server (with the risk of filtering slightly different rows in edge cases):