Several questions around Tables

[mattie47]

Question

Hi,

Firstly - thanks for creating such a great tool!

I've been quite confused by a few things around tables, and making use of styling and user customization.

I have the following simplified 'sanitized' example:

#!/usr/bin/env python3


from nicegui import events, ui

DEBOUNCE_IN_MS = "5000"

protocols = ["Protocol_1", "Protocol_2", "Protocol_3"]

columns = [
        {'name': 'active', 'label': 'Active Thing', 'field': 'active', 'align': 'center', 'headerClasses': 'w-2.5'},
        {'name': 'thingName', 'label': 'Name', 'field': 'thingName', 'align': 'left', 'headerClasses': 'w-48'},
        {'name': 'tin', 'label': 'TIN', 'field': 'tin', 'align': 'left', 'headerClasses': 'w-48'},
        {'name': 'protocol', 'label': 'Protocol', 'field': 'protocol', 'align': 'left'},
        {'name': 'measure', 'label': 'measure (KM)', 'field': 'measure', 'align': 'left'},
        {'name': 'measureTwo', 'label': 'measureTwo (Hours)', 'field': 'measureTwo', 'align': 'left'},
        {'name': 'delete', 'label': 'Delete', 'field': 'delete', 'align': 'left', 'headerClasses': 'hidden'},
        {'name': 'id', 'label': 'ID', 'field': 'id', 'align': 'left', 'headerClasses': 'hidden'},
    ]

rows = [
    {'id': 0, 'active': True, 'thingName': 'Thing Desc Here 1', 'tin': '123456789ABCDEFGH', 'protocol': 'Protocol_1', 'measure': 4000, 'measureTwo': 1024 },
    {'id': 1, 'active': False, 'thingName': 'Thing Desc Here 2', 'tin': '123456789ABCDEFGH', 'protocol': 'Protocol_2', 'measure': 0, 'measureTwo': 0 },
    {'id': 2, 'active': False, 'thingName': 'Thing Desc Here 3', 'tin': '123456789ABCDEFGH', 'protocol': 'Protocol_3', 'measure': 4000, 'measureTwo': 1024 },
]

def add():
    return

def save():
    return

def restore():
    return

def update():
    return

def remove():
    return


with ui.row().classes('min-w-full'):
    ui.button(on_click=add).props('outline icon=add')
    ui.space()
    save_changes = ui.button('Save Changes', on_click=save)
    cancel = ui.button('Cancel', on_click=restore)


table = ui.table(columns=columns, rows=rows, row_key='name')\
    .classes('lg:min-w-full')\
    .props("dense") # "wrap-cells" didn't work unfortunately. 
    # .classes('md:min-w-full')
    # .classes('min-w-min')

table.add_slot('header', r'''
    <q-tr :props="props">
        <q-th v-for="col in props.cols" :key="col.name" :props="props" style="white-space: normal;">
            {{ col.label }}
        </q-th>
    </q-tr>
''')

table.add_slot('body', r'''
    <q-tr :props="props">
      
        <q-td key="active" :props="props">
            <q-checkbox
                v-model="props.row.active"
                @update:model-value="() => $parent.$emit('update', props.row)"
            />
        </q-td>               
               

        <q-td key="thingName" :props="props">
            <q-input
                v-model="props.row.thingName"
                debounce="''' + DEBOUNCE_IN_MS + r'''"
                @update:model-value="() => $parent.$emit('update', props.row)"
                :rules="[
                    (val) => (val !== '') ||
                    'Please enter a value...',
                ]"
            />
        </q-td>

        <q-td key="tin" :props="props">
            <q-input
                v-model="props.row.tin"
                maxlength="17"
                debounce="''' + DEBOUNCE_IN_MS + r'''"
                @update:model-value="() => $parent.$emit('update', props.row)"
                :rules="[
                         (val) => (val !== '' && val.length === 17) ||
                         'TIN must be 17 Characters',
                         ]"
            />
        </q-td>     

        <q-td key="protocol" :props="props">
            <q-select                
                v-model="props.row.protocol"
                :options="''' + str(list(map(lambda x: x.upper(), protocols))) + r'''"
                @update:model-value="() => $parent.$emit('update', props.row)"
            />
        </q-td>

        <q-td key="measure" :props="props">
            <q-input
                v-model="props.row.measure"
                type='number'
                debounce="''' + DEBOUNCE_IN_MS + r'''"
                :max-decimals="3"
                @update:model-value="() => $parent.$emit('update', props.row)"
                :rules="[
                    (val) => (val !== null && val !== '') ||
                    'measure reading can not be empty',
                ]"
            />
        </q-td>
        
        <q-td key="measureTwo" :props="props">
            <q-input
                v-model="props.row.measureTwo"
                type='number'
                debounce="''' + DEBOUNCE_IN_MS + r'''"
                :max-decimals="3"
                step="any"
                @update:model-value="() => $parent.$emit('update', props.row)"
                :rules="[
                    (val) => (val !== null && val !== '') ||
                    'Please enter a valid value...',
                ]"
            />
        </q-td>

        <q-td auto-width >
            <q-btn 
               size="sm"
               round dense
               icon="delete"
               style="background-color: #888; color:white;"
               @click="() => $parent.$emit('delete', props.row)"
            />
        </q-td>

    </q-tr>

''')

table.on('update', update)
table.on('remove', remove)


ui.colors(primary='#555')

ui.run(port=9999)

1. q-select dropdown list is not "in line" with other rows

Notice how the bottom of the text for "Protocol_3" is not in-line with all other text on the row? I get the impression this is a bug?

I see the other text in the row has div class="q-field__bottom row items-start q-field__bottom--animated" , but q-select doesn't.

2. Possibly same issue again with q-checkbox and q-btn

Refer to the first and last column.

3. Specify custom screen width

I'm using Nicegui on a raspberry Pi with a 5 inch touchscreen. This has a resolution of 800 x 480.

How would I add a custom width to nicegui/quasar/tailwind?

I see quasar has the following:
https://quasar.dev/options/screen-plugin

As well as tailwind with:
https://tailwindcss.com/docs/screens

If I am to make use of my 800x480 screen at that specific resolution, what exactly should I be doing? Do I need to make a reference for both quasar and tailwind separately? I'm also not too sure how to do this regardless.

This then leads into the next question.

4. How to configure table width depending on screen size.

For the 5" touch screen, certain columns in the example (Name, and TIN) are very 'narrow" by default.

I've tried to 'workaround' this by doing:

        {'name': 'active', <output omitted>, 'headerClasses': 'w-2.5'},
        {'name': 'thingName', <output omitted>, 'headerClasses': 'w-48'},
        {'name': 'tin', <output omitted>'headerClasses': 'w-48'},

Which works on the small screen size, but things look 'odd' when viewing nicegui on a normal screen.

I've tried some of the options on https://tailwindcss.com/docs/responsive-design but not really having much luck in getting this right.

For example, I tried {'name': 'thingName', <output omitted>, 'headerClasses': 'md:w-48 w-flex'} or ``{'name': 'thingName', , 'headerClasses': 'md:max-md:w-48 w-flex'} however this seems to just obey one rule, and not both conditions?

5. Adding to prop definitions

<q-td key="tin" :props="props">

My understanding of the above is that we will inherit the previously defined props for the table.

What if we want to do this, but also add to the props for this specific section?

6. Change button styling

Consider the following near the bottom of the example:
style="background-color: #888; color:white;"

Is there a way I could have done this better? perhaps convert background color into a variable, or a shared value referenced from elsewhere? I couldn't find an example of how this might be achieved.

Thanks again for the help!

As a mostly backend dev, I really appreciate NiceGUI, but I have found it quite a learning curve trying to understand where to use things like props, classes, or style etc. I get the basics of html and javascript, but it has been confusing knowing how to read in-between-the-lines between the nicegui docs, versus quasar or tailwind.

It would be really useful having a guide or example of how to use the quasar docs when doing customization with nicegui. My main issue is often not knowing the syntax, or how to do multiple things in a row. Ultimately more examples in the nicegui docs is extremely useful.

Thanks!

[falkoschindler]

Firstly - thanks for creating such a great tool!

Thanks! 🙂

1. q-select dropdown list is not "in line" with other rows
2. Possibly same issue again with q-checkbox and q-btn

I guess the problem is that most inputs come with rules, which reserves bottom space for the error message. You can add the hide-bottom-space prop to remove this space to be more in line with the q-select element. Or you add some space to the select element with class="mb-5".

3. Specify custom screen width

I don't understand what you mean with "screen width". Isn't the browser dictating the screen width and the (hopefully) responsive page content adapts?

4. How to configure table width depending on screen size.

I don't think there's a simple answer. Your approach looks promising though. But md:max-md:w-48 looks contradictory since md: specifies the lower limit and max-md: sets the upper limit to the same value. I would try md:max-lg:w-48 or similar.

5. Adding to prop definitions

I don't quite understand. The QTable documentation describes each slot with its props that can be accessed when defining a template. In my understanding the expression :props="props" basically maps these props to a variable that can be used throughout the template definition. For more information I recommend looking into Quasar documentation and forums, since I also have only limited understanding of the technical details.

6. Change button styling

You could introduce a custom CSS class

ui.add_css('''
    .my-white-button {
        background-color: #888;
        color: white;
    }
''')

and use it for the button by adding class="my-white-button".

I have found it quite a learning curve

I totally understand. One of NiceGUI's most important strengths is that it makes underlying frameworks accessible, which opens a world of customizability to the Python developer. This can be challenging, and we're continuously trying to improve the documentation to help beginners as well as advanced developers to learn all these concepts. Thank you for your feedback! I'll keep thinking about how to incorporate it into the documentation.