NiceGUI में DataFrame के सूची‑कॉलम की रेंडरिंग: Streamlit जैसा परिणाम

Streamlit से NiceGUI ले जाते समय सूची कॉलम स्ट्रिंग बन जाते हैं। JS फ़ॉर्मैटर के साथ Streamlit जैसी रेंडरिंग और तेज प्रदर्शन पाएं; Polars/Pandas उदाहरण सहित टिप्स भी.

सूची-मूल्य वाले कॉलम वाले DataFrame की रेंडरिंग अलग‑अलग UI फ्रेमवर्क में अक्सर अलग दिखती है। जब आप तालिका को Streamlit से NiceGUI में ले जाते हैं, तो आमतौर पर यह देखकर हैरानी होती है कि किसी सेल की सूची अब सूची की तरह नहीं दिखती। इसके बजाय वह जोड़कर एक स्ट्रिंग बन जाती है, और from_polars() के जरिए होने वाला डिफ़ॉल्ट रूपांतरण स्पष्ट रूप से धीमा पड़ सकता है। यहां उद्देश्य है कि Streamlit जैसी प्रस्तुति मिले और UI भी चुस्त बना रहे।

फ्रेमवर्क बदलने पर क्या बदलता है

Streamlit में DataFrame की किसी सेल के अंदर मौजूद सूची, सूची के रूप में ही दिखाई जाती है। वही डेटा NiceGUI में, ui.table.from_polars के जरिए देने पर इस तरह बदला जाता है कि सूची वाला कॉलम एक स्ट्रिंग में जोड़ दिया जाता है। यह रूपांतरण चरण स्वयं भी धीमा हो सकता है।

नीचे दिए गए छोटे उदाहरण एक‑ही डेटा पर यह फर्क स्पष्ट करते हैं।

Streamlit:

import polars as pl
import streamlit as st
records = pl.DataFrame({
    "u": [1, 2, 3],
    "v": [4, 5, 6],
    "w": [[1, 2], [3, 4], [5, 6]],
})
st.write(records)

NiceGUI (डिफ़ॉल्ट व्यवहार):

import polars as pl
from nicegui import ui
records = pl.DataFrame({
    "u": [1, 2, 3],
    "v": [4, 5, 6],
    "w": [[1, 2], [3, 4], [5, 6]],
})
ui.table.from_polars(records)
ui.run()

यह क्यों होता है

NiceGUI तालिका के लिए आने वाले डेटा को रूपांतरित करता है। व्यवहार में, इसका अर्थ है कि कोशिकाओं में मौजूद सूची‑मान प्रदर्शन के लिए स्ट्रिंग में बदल दिए जाते हैं। लाइब्रेरी के स्रोत (table.py, table.js, dynamic_properties.js) देखने पर पता चलता है कि रूपांतरण के लिए JavaScript कोड में रिकर्शन का उपयोग है, जो धीमापन बढ़ा सकता है। रोज़मर्रा के काम के लिए अहम बात यह है कि डिफ़ॉल्ट रूपांतरण Streamlit की तरह सूची की रेंडरिंग सुरक्षित नहीं रखता और यह चरण महंगा साबित हो सकता है।

सूची जैसी रेंडरिंग वापस कैसे पाएं और गति कैसे बढ़ाएं

टेबल API आपको किसी कॉलम पर फ़ॉर्मैटर लगाने की सुविधा देता है। सूची वाले कॉलम को JavaScript फ़ॉर्मैटर सौंपकर आप मानों के प्रदर्शन पर नियंत्रण कर लेते हैं और भारी रूपांतरण से बचते हैं। सीधा‑सादा विकल्प है String(value) कॉल करना, जो सेल में सूची का कॉमा‑सेपरेटेड रूप देता है। जरूरत हो तो इसे और अनुकूलित किया जा सकता है।

एक छोटी‑सी शर्त है: इस तरीके में आपको सभी कॉलम स्पष्ट रूप से परिभाषित करने होंगे।

from nicegui import ui
import polars as pl
headers = [
    {"name": "u", "label": "u", "field": "u"},
    {"name": "v", "label": "v", "field": "v"},
    {
        "name": "w",
        "label": "w",
        "field": "w",
        ":format": "value => String(value)",  # सूची मानों को स्ट्रिंग के रूप में रेंडर करें
    },
]
data = pl.DataFrame({
    "u": [1, 2, 3],
    "v": [4, 5, 6],
    "w": [[1, 2], [3, 4], [5, 6]],
})
ui.table.from_polars(df=data, columns=headers)
ui.run()

यह एक ही बार में दो व्यावहारिक समस्याएँ हल कर देता है: तालिका प्रतिक्रियाशील हो जाती है और सूची वाला कॉलम पढ़ने योग्य, कॉमा‑सेपरेटेड रूप में दिखता है। यही विचार pandas के साथ from_pandas() पर भी काम करता है।

यह जानकारी उपयोगी क्यों है

फ्रेमवर्क बदलना शायद ही कभी एक‑से‑एक मैपिंग होता है। NiceGUI डेटा को कैसे बदलता है, यह समझना उलझन भरे आउटपुट और अचानक पड़ने वाले प्रदर्शन‑प्रभाव से बचाता है। जब आपको मालूम हो कि सूची‑मान वाली कोशिकाएँ बदली जाती हैं और आप JavaScript फ़ॉर्मैटर से फ़ॉर्मैटिंग ओवरराइड कर सकते हैं, तो आप Streamlit जैसा आउटपुट पा सकते हैं और ऐप को चुस्त रख सकते हैं।

मुख्य बातें

यदि NiceGUI में रेंडरिंग के दौरान सूची वाला कॉलम जुड़कर स्ट्रिंग बन रहा हो और from_polars धीमा लगे, तो कॉलमों को स्पष्ट रूप से परिभाषित करें और सूची कॉलम पर फ़ॉर्मैटर जोड़ें। String(value) एक सरल विकल्प है जो पठनीयता और गति दोनों लौटाता है, और आप आवश्यक प्रस्तुति के अनुरूप फ़ॉर्मैटर को आगे भी ढाल सकते हैं। polars और pandas के बीच अदला‑बदली करते समय from_pandas के साथ भी यही तरीका अपनाएँ। संक्षेप में, सूची कॉलमों के लिए फ़ॉर्मैटिंग को स्पष्ट करें, और आपको पूर्वानुमेय, तेज़ परिणाम मिलेंगे।