docs: SEO optimization for tables and data grids

docs/app/reflex_docs/pages/docs/__init__.py

@@ -158,6 +158,7 @@ def get_previews_from_frontmatter(filepath: str) -> dict[str, str]:
     "docs/recipes-overview.md": "Recipes Overview",
     "docs/events/special_events.md": "Special Events Docs",
     "docs/library/graphing/general/tooltip.md": "Graphing Tooltip",
+    "docs/library/tables-and-data-grids/index.md": "Tables and Data Grids",
     "docs/recipes/content/grid.md": "Grid Recipe",
     "docs/hosting/deploy-to-gcp.md": "Deploy to GCP",
 }
@@ -357,14 +358,32 @@ def handle_library_doc(
         graphing_components[resolved.category].append(clist)
     else:
         component_list[resolved.category].append(clist)
+    # Library docs render via multi_docs (not make_docpage), so without this
+    # they'd inherit the generic site-wide meta description. Derive a
+    # page-specific meta description from the doc's frontmatter/body prose, and
+    # prefer an explicit frontmatter `title:` for the page title.
+    try:
+        source: str | None = Path(actual_path).read_text(encoding="utf-8")
+        document = parse_document(source)
+    except Exception:
+        source, document = None, None
+    frontmatter = document.frontmatter if document is not None else None
+    metadata = dict(frontmatter.metadata) if frontmatter is not None else None
+    description = extract_doc_description(source, metadata) if source else None
+    display_title = (
+        frontmatter.title
+        if frontmatter is not None and frontmatter.title
+        else resolved.display_title
+    )
     return multi_docs(
         path=resolved.route,
         virtual_path=doc,
         actual_path=actual_path,
         previews=previews,
         component_list=clist,
-        title=resolved.display_title,
+        title=display_title,
         ll_component_list=ll_clist,
+        description=description,
     )
 
 
@@ -374,7 +393,7 @@ def get_component_docgen(virtual_doc: str, actual_path: str, title: str):
     if resolved is None:
         return None
 
-    if virtual_doc.startswith("docs/library"):
+    if virtual_doc.startswith("docs/library") and not virtual_doc.endswith("/index.md"):
         return handle_library_doc(virtual_doc, actual_path, title, resolved)
 
     if virtual_doc.startswith(CHANGELOG_VIRTUAL_PREFIX):

docs/app/reflex_docs/pages/docs/component.py

@@ -930,6 +930,7 @@ def multi_docs(
     component_list: list,
     title: str,
     ll_component_list: list | None = None,
+    description: str | None = None,
 ):
     components = [
         component_docs(component_tuple, previews)
@@ -990,7 +991,7 @@ def links(current_page, ll_doc_exists, path):
                 )
         return rx.fragment()
 
-    @docpage(set_path=path, t=title)
+    @docpage(set_path=path, t=title, description=description)
     def out():
         toc = get_docgen_toc(actual_path)
         doc_content = Path(actual_path).read_text(encoding="utf-8")
@@ -1018,7 +1019,7 @@ def out():
             class_name="flex flex-col w-full",
         )
 
-    @docpage(set_path=path + "low", t=title + " (Low Level)")
+    @docpage(set_path=path + "low", t=title + " (Low Level)", description=description)
     def ll():
         ll_virtual = virtual_path.replace(".md", "-ll.md")
         toc = get_docgen_toc(ll_actual_path)

docs/library/tables-and-data-grids/data_editor.md

@@ -1,11 +1,12 @@
 ---
 components:
   - rx.data_editor
+meta_description: "Build an editable data grid in Python with Reflex. The rx.data_editor component is a fast, spreadsheet-like data grid based on Glide Data Grid for editing tabular data — all in pure Python."
 ---
 
 # Data Editor
 
-A datagrid editor based on [Glide Data Grid](https://grid.glideapps.com/)
+The Reflex data editor (`rx.data_editor`) is a fast, editable data grid based on [Glide Data Grid](https://grid.glideapps.com/). Use it for spreadsheet-like editing of tabular data in pure Python — add, edit, and format cells across many rows and columns.
 
 ```python exec
 import reflex as rx
@@ -453,3 +454,11 @@ rx.data_editor(
     height="30vh",
 )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Data Table](/docs/library/tables-and-data-grids/data-table)
+- [Table](/docs/library/tables-and-data-grids/table)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

docs/library/tables-and-data-grids/data_table.md

@@ -1,6 +1,7 @@
 ---
 components:
   - rx.data_table
+meta_description: "Display data in an interactive table in Python with Reflex. The rx.data_table component turns a pandas DataFrame into a searchable, sortable, paginated data table — all in pure Python."
 ---
 
 ```python exec
@@ -9,8 +10,8 @@ import reflex as rx
 
 # Data Table
 
-The data table component is a great way to display static data in a table format.
-You can pass in a pandas dataframe to the data prop to create the table.
+Reflex's data table component (`rx.data_table`) is a great way to display static data — such as a pandas DataFrame — as an interactive table in pure Python.
+You can pass a pandas dataframe to the data prop to create the table, with built-in search, sorting, and pagination.
 
 In this example we will read data from a csv file, convert it to a pandas dataframe and display it in a data_table.
 
@@ -68,3 +69,11 @@ def index():
         columns=State.columns,
     )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Table](/docs/library/tables-and-data-grids/table)
+- [Data Editor](/docs/library/tables-and-data-grids/data-editor)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

docs/library/tables-and-data-grids/index.md

@@ -0,0 +1,18 @@
+---
+title: Tables and Data Grids
+meta_description: "Display and edit tabular data in Python with Reflex. Choose between a composable table, a searchable and sortable data table for pandas DataFrames, and an editable data grid — all in pure Python."
+---
+
+# Tables and Data Grids in Reflex
+
+Reflex gives you three ways to work with tabular data in pure Python — no JavaScript required. Pick the component that matches your use case:
+
+- [Table](/docs/library/tables-and-data-grids/table) — a semantic, composable React/HTML table you build from headers, rows, and cells. Best when you want full control over the markup and styling.
+- [Data Table](/docs/library/tables-and-data-grids/data-table) — display a pandas DataFrame as an interactive data table with built-in search, sorting, and pagination. Best for read-only views of static data.
+- [Data Editor](/docs/library/tables-and-data-grids/data-editor) — a fast, editable, spreadsheet-like data grid (based on Glide Data Grid) for adding and editing tabular data across many rows and columns.
+
+## Which one should I use?
+
+- Use the [Table](/docs/library/tables-and-data-grids/table) when you render your own rows and want a lightweight, fully styleable table component.
+- Use the [Data Table](/docs/library/tables-and-data-grids/data-table) when your data is already in a pandas DataFrame and you want search, sort, and pagination out of the box.
+- Use the [Data Editor](/docs/library/tables-and-data-grids/data-editor) when users need to edit cells interactively, like a spreadsheet.

docs/library/tables-and-data-grids/table.md

@@ -1,4 +1,5 @@
 ---
+meta_description: "Build tables in Python with Reflex. The rx.table component is a semantic, composable React table for presenting tabular data with headers, rows, and cells — all in pure Python, no JavaScript."
 components:
   - rx.table.root
   - rx.table.header
@@ -149,7 +150,7 @@ class Customer(rx.Model, table=True):
 
 # Table
 
-A semantic table for presenting tabular data.
+The Reflex table component (`rx.table`) is a semantic, composable table for presenting tabular data in pure Python. It renders a standard React/HTML table with headers, rows, and cells that you compose yourself.
 
 If you just want to [represent static data](/docs/library/tables-and-data-grids/data-table) then the [`rx.data_table`](/docs/library/tables-and-data-grids/data-table) might be a better fit for your use case as it comes with in-built pagination, search and sorting.
 
@@ -1303,3 +1304,11 @@ rx.flex(
     spacing="2",
 )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Data Table](/docs/library/tables-and-data-grids/data-table)
+- [Data Editor](/docs/library/tables-and-data-grids/data-editor)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py

@@ -40,7 +40,13 @@
 
 
 #: Known frontmatter keys that are not component preview lambdas.
-_KNOWN_KEYS = frozenset({"components", "only_low_level", "title"})
+_KNOWN_KEYS = frozenset({
+    "components",
+    "only_low_level",
+    "title",
+    "meta_description",
+    "description",
+})
 
 
 def _extract_frontmatter(source: str) -> tuple[FrontMatter | None, str]: