Piccolo Admin Does Not Display Too Many Columns. #381

amazingakai · 2024-03-28T15:19:22Z

amazingakai
Mar 28, 2024

I have a table, but it doesn't show any rows. Maybe it's because there are too many columns to fit because rest of my tables work fine. You can view this video to see how it looks. We need a scroll bar so we can see all the columns, but I'm not sure if it's already there and this is just a UI bug because I did not check the source code.

Here's the table:

import os

from piccolo.columns.column_types import (
    Date,
    Serial,
    Varchar,
)
from piccolo.table import Table
from piccolo_admin.endpoints import TableConfig
from piccolo_api.media.local import LocalMediaStorage

from utils.helpers import get_url

from .enums import Class, Stream, Subject, UploadType


class Upload(Table, tablename="uploads"):
    id: Serial
    title = Varchar(required=True, null=False)
    created_at = Date(required=True, null=False)
    type_ = Varchar(choices=UploadType, required=True, null=False, db_column_name="type")
    file = Varchar(required=True, null=False)
    class_ = Varchar(choices=Class, required=True, null=False, db_column_name="class")
    subject = Varchar(choices=Subject, required=False, null=True)
    stream = Varchar(choices=Stream, required=False, null=True)

    def to_dict(self) -> dict:
        return {
            "id": self.id,
            "title": self.title,
            "created_at": self.created_at,
            "type": self.type_,
            "file": get_url(f"/uploads/{self.file}"),
            "class": self.class_,
            "subject": self.subject,
            "stream": self.stream,
        }


UPLOAD_FILES_MEDIA = LocalMediaStorage(
    column=Upload.file,
    media_path=os.path.join(os.environ["MEDIA_ROOT"], "uploads"),
    allowed_extensions=[
        "jpg",
        "jpeg",
        "png",
        "pdf",
    ],
)


UPLOADS_CONFIG = TableConfig(
    Upload,
    visible_columns=[
        Upload.id,
        Upload.title,
        Upload.created_at,
        Upload.type_,
        Upload.file,
        Upload.class_,
        Upload.subject,
        Upload.stream,
    ],
    visible_filters=[
        Upload.title,
        Upload.created_at,
        Upload.type_,
        Upload.file,
        Upload.class_,
        Upload.subject,
        Upload.stream,
    ],
    media_storage=[UPLOAD_FILES_MEDIA],
)

Answered by sinisaos

Mar 28, 2024

@amazingakai The problem is the type_ and class_ columns because the column._meta.name is not the same as the column._meta.db_column_name. For now, if you just remove the db_column_name from the column definition, everything works fine. I'll take a closer look tomorrow.

View full answer

dantownsend · 2024-03-28T15:21:38Z

dantownsend
Mar 28, 2024
Maintainer

Are there any errors in the web console, or terminal?

3 replies

amazingakai Mar 28, 2024
Author

No errors server side, got this weird error in browser console:

TypeError: e is undefined
    ot http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    isBoolean http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    default http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    Y0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    default http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    Y0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    default http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    o http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    setup http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Hn http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    e0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    x http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    k http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    e0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    x http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    k http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    g http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    g http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Q http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    a0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    L http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    E http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Je http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Fz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    promise callback*Dz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Pr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    et http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Tz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    set http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    mounted http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    Mt http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Je http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    re http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    __weh http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    ir http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Fz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    promise callback*Dz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    RM http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Hz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    u http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    set value http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    y http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    promise callback*y http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    f http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    install http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    use http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    xT http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:870
    Z3 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    <anonymous> http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:870
[index.0b009b5c.js:1:15775](http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js)
    pf http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    s2 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Hn http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    e0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    x http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    k http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    e0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    x http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    k http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    g http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    g http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    B http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Q http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    a0 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    L http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    E http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    W http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    A http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    P http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    run http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    update http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Je http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Fz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    (Async: promise callback)
    Dz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Pr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    et http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Tz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    set http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    mounted http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:84
    Mt http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Je http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    re http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    __weh http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    ir http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Fz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    (Async: promise callback)
    Dz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    RM http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Hz http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    u http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    effect http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    Gp http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    tc http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    kr http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    set value http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    w http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    y http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    (Async: promise callback)
    y http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    f http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    install http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:23
    use http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    xT http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:870
    Z3 http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:1
    <anonymous> http://127.0.0.1:15366/admin-panel/assets/index.0b009b5c.js:870
    ```

dantownsend Mar 28, 2024
Maintainer

Are there any network errors?

amazingakai Mar 28, 2024
Author

None

The response also has data:

sinisaos · 2024-03-28T21:48:18Z

sinisaos
Mar 28, 2024
Collaborator

@amazingakai The problem is the type_ and class_ columns because the column._meta.name is not the same as the column._meta.db_column_name. For now, if you just remove the db_column_name from the column definition, everything works fine. I'll take a closer look tomorrow.

1 reply

amazingakai Mar 28, 2024
Author

Oh, alright!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Piccolo Admin Does Not Display Too Many Columns. #381

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Piccolo Admin Does Not Display Too Many Columns. #381

Uh oh!

Uh oh!

amazingakai Mar 28, 2024

Replies: 2 comments · 4 replies

Uh oh!

dantownsend Mar 28, 2024 Maintainer

Uh oh!

amazingakai Mar 28, 2024 Author

Uh oh!

dantownsend Mar 28, 2024 Maintainer

Uh oh!

Uh oh!

amazingakai Mar 28, 2024 Author

Uh oh!

sinisaos Mar 28, 2024 Collaborator

Uh oh!

amazingakai Mar 28, 2024 Author

amazingakai
Mar 28, 2024

Replies: 2 comments 4 replies

dantownsend
Mar 28, 2024
Maintainer

amazingakai Mar 28, 2024
Author

dantownsend Mar 28, 2024
Maintainer

amazingakai Mar 28, 2024
Author

sinisaos
Mar 28, 2024
Collaborator

amazingakai Mar 28, 2024
Author