Could not determine the storage type

[dongshik]

Describe the bug A clear and concise description of what the bug is. I was add data_table component with sample data table_data = [{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}]

        pc.data_table(
            data=State.table_data,
            pagination=True,
            search=True, #False
            sort=True,
            resizable=True,
        ),

in pc run occurred error

wait - compiling... event - compiled successfully in 177 ms (730 modules) wait - compiling... event - compiled client and server successfully in 338 ms (758 modules) warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works wait - compiling / (client and server)... event - compiled client and server successfully in 283 ms (787 modules) error - Error: [Grid.js] [ERROR]: Could not determine the storage type at t.error (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:19023) at t.createFromUserConfig (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:35519) at e.fromUserConfig (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:41714) at e.update (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:41295) at new e (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:58512) at new n (/pynecone/biz_monitor/.web/node_modules/gridjs-react/dist/gridjs.production.min.js:1:1299) at processChild (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14) at resolve (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) { page: '/' }

To Reproduce Steps to reproduce the behavior:

• Code/Link to Repo:

Expected behavior expected result

Screenshots

** Specifics (please complete the following information):**

• Python Version: Python 3.11.1
• Pynecone Version: 0.1.14
• OS: centos 7.6
• Browser (Optional): Chrome

Additional context Add any other context about the problem here.

[Lendemor]

Do you still get error if you try the following in your State:

table_data: List[Dict[str,str]] = [{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}]

[Alek99]

Do you still get error if you try the following in your State:

table_data: List[Dict[str,str]] = [{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}]

I see this may be the same problem as on discord. We need to improve the docs so users know to declare types. I'll get on this asap tomorrow

[dongshik]

Do you still get error if you try the following in your State:

table_data: List[Dict[str,str]] = [{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}]

Thanks for your comments. I changed my code like that

class State(pc.State): .... table_data: list[dict[str,str]] = [{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}]

def index(): return pc.center( .... pc.data_table( data=State.table_data, pagination=True, search=True, #False sort=True, resizable=True, ), ), )

but still, occurred error when a page refreshes time. (it is correctly operated in 0.1.12)

pynecone : 0.1.14 python : 3.11.1 node : v18.13.0 system : docker container (https://hub.docker.com/r/nikolaik/python-nodejs, latest) os : Debian GNU/Linux 11 \n \l

wait - compiling... event - compiled successfully in 157 ms (751 modules) wait - compiling... event - compiled client and server successfully in 266 ms (787 modules)

error - Error: [Grid.js] [ERROR]: Could not determine the storage type at t.error (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:19023) at t.createFromUserConfig (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:35519) at e.fromUserConfig (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:41714) at e.update (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:41295) at new e (/pynecone/biz_monitor/.web/node_modules/gridjs/dist/gridjs.production.min.js:15:58512) at new n (/pynecone/biz_monitor/.web/node_modules/gridjs-react/dist/gridjs.production.min.js:1:1299) at processChild (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14) at resolve (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (/pynecone/biz_monitor/.web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) { page: '/' }

[Alek99]

Oh I see so data for this component has to be either a pandas dataframe or 2d list

[Alek99]

https://pynecone.io/docs/library/datadisplay/datatable

[dongshik]

Hi, @Alek99

i was changed my data to padas dataframe like that: table_data: list[list] = pd.DataFrame([{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}])

it is correctly working. Thanks.

[ilyoungkim]

Hi, @Alek99

i was changed my data to padas dataframe like that: table_data: list[list] = pd.DataFrame([{'column1': '', 'column2': '', 'column3': '', 'column4': '', 'column5': '', 'column6': '', 'column7': '', 'column8': ''}])

it is correctly working. Thanks.

also, I made a data to dataframe. list[list] is not working.

[masenf]

This appears to be working.

@ilyoungkim if you're continuing to have problems, can you open a new issue and post code that reproduces the problem?

[yosmarcode]

Yo he tenido el mismo problema y la manera como lo solucione fue realizando una condición de esta manera, Donde en la data le paso el mapeo de datos y si se demora o no hay datos los lleno array vacío

Esto usando Reactjs

Creo una constante

  const dataDocument = useMemo(() => {
    return document?.data ?? []
  }, [document])

 data={
          dataDocument.map((row: IGetDocumentList) => [
            row.tipo?.nombre ?? 'S/I',
            row.proyecto ? row?.proyecto : 'S/I',
            row.etapa ? row.etapa : 'S/I',
            row.archivo ?? 'S/I',
            formatDateDisplay(row.fechaModificacion, 'DD-MM-YYYY') ?? 'S/I',
            row.usuarioRegistro ?? 'S/I',
            _(
              <div style={{ display: 'flex', justifyContent: 'space-between', justifyItems: 'center', gap: 8 }}>
                ....
              </div>
            )
          ] ?? []

Espero que le pueda servir a alguien