how to sum selected columns in data table

[tofusoul]

Question

Hi I have a table like this:

with 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

[falkoschindler]

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')

[tofusoul]

Hi @falkoschindler

Thanks for the reply! This code adds the row at the bottom with the total value of the age column, but what I was hoping to do was to have that sum applied to the filtered rows when the filter is replied.

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},
]

class State(BaseModel):
    filter: str = "" 

state = State()

filter = ui.input(label="Filter Table", placeholder="filter text").bind_value(state, target_name="filter")
with ui.table(columns=columns, rows=rows, row_key='name').bind_filter_from(state) as table:
    with table.add_slot('bottom-row'):
        with table.row():
            with table.cell():
                ui.label('Total age').classes('font-medium')

so it works up to here, but is there any way you know of, to get the calculated value from just the filtered rows, after that filter is applied, and not the whole dictionary?

Thanks again for the amazing library and amazing help you give the users!

[tofusoul]

So this was probably just me getting a hang of nicegui, but there is a computed prop called 'filteredSortedRows' that is supposed to return just the rows that have the sort and filter applied. But I am not quite sure how to access it via the library and apply it to the table.

[tofusoul]

I have tried for that last row

            with table.cell():
                ui.label(str(sum(row["age"] for row in table.props("filteredSortedRows").rows)))

But the value stays to total sum of the table after applying the filter. So let's say, my filter string is Bob, which filters the table to just Bob's row, I still get a sum of 82 instead of 23 which is the value I am hoping to have in that cell.

I am getting no errors or warnings from this line of code. Not sure why it isn't working. Would I have to use on_filter_change in some way? How would I utilise that prop in a callback function?

edit: made the question more specific

[falkoschindler]

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):

def update_total():
    search = state.filter.lower()
    total.text = sum(row['age'] for row in rows if any(search in str(cell).lower() for cell in row.values()))

filter = ui.input(label="Filter Table", placeholder="filter text", on_change=update_total).bind_value(state, 'filter')
with ui.table(columns=columns, rows=rows, row_key='name').bind_filter_from(state) as table:
    with table.add_slot('bottom-row'):
        with table.row():
            with table.cell():
                ui.label('Total age').classes('font-medium')
            with table.cell():
                total = ui.label().classes('font-medium')
update_total()

[tofusoul]

Thanks again @falkoschindler

[srobertson86]

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')

[falkoschindler]

This sounds like a great idea, @srobertson86! Would you like to create a pull request? 🙂