mostly finished get-started

Makefile

@@ -10,6 +10,9 @@ setup:
 docs-build:
 	cd docs && quarto render
 
+docs-reference:
+	quartodoc build --config docs/_quarto.yml
+
 react_tables/static/reactable-py.esm.%: 
 	cd tmp/reactable
 	npx esbuild \

docs/_quarto.yml

@@ -33,7 +33,7 @@ website:
       id: get-started
       contents:
         - get-started/index.qmd
-        - get-started/overview.qmd
+        #- get-started/overview.qmd
         - get-started/code-structure.qmd
         - section: "Controls"
           contents:
@@ -53,15 +53,21 @@ website:
         - section: "Format"
           contents:
             - get-started/format-columns.qmd
-            - get-started/format-custom-rendering.qmd
+            - get-started/format-aggregated.qmd
+            - get-started/format-cell.qmd
+            - get-started/format-header-footer.qmd
+            - get-started/format-details.qmd
         - section: "Style"
           contents:
-            - get-started/style-conditional.qmd
             - get-started/style-table.qmd
-            - get-started/style-theming.qmd
+            - get-started/style-conditional.qmd
             - get-started/style-custom-sort-indicators.qmd
+            - get-started/style-theming.qmd
         - section: "Extra"
           contents:
+            - get-started/format-custom-rendering-js.qmd
+            - get-started/style-conditional-js.qmd
+            - get-started/extra-advanced-filters.qmd
             - examples/index.qmd
 
 # tell quarto to read the generated sidebar
@@ -76,9 +82,25 @@ quartodoc:
   sidebar: _sidebar.yml
 
   sections:
-    - title: Some functions
-      desc: Functions to inspect docstrings.
+    - title: Create tables
+      desc: Classes to build reactable tables.
       contents:
         # the functions being documented in the package.
         # you can refer to anything: class methods, modules, etc..
-        - Reactable
+        - Reactable
+    - title: Customize columns
+      contents:
+        - Column
+        - ColGroup
+        - ColFormat
+        - ColFormatGroupBy
+    - title: Customize tables
+      contents:
+        - Theme
+        - Language
+
+    - title: Rendering
+      desc: Classes used in custom rendering functions.
+      contents:
+        - CellInfo
+        - RowInfo

docs/_sidebar.yml

@@ -4,6 +4,20 @@ website:
     - reference/index.qmd
     - contents:
       - reference/Reactable.qmd
-      section: Some functions
+      section: Create tables
+    - contents:
+      - reference/Column.qmd
+      - reference/ColGroup.qmd
+      - reference/ColFormat.qmd
+      - reference/ColFormatGroupBy.qmd
+      section: Customize columns
+    - contents:
+      - reference/Theme.qmd
+      - reference/Language.qmd
+      section: Customize tables
+    - contents:
+      - reference/CellInfo.qmd
+      - reference/RowInfo.qmd
+      section: Rendering
     id: reference
   - id: dummy-sidebar

docs/examples/index.qmd

@@ -819,15 +819,22 @@ Reactable(
 
 ```{python}
 # | label: style-cond-cell-py
+from react_tables.models import CellInfo
+
+
+def cond_style(ci: CellInfo):
+    return {
+        "color": "#008800" if ci.value > 0 else "#e00000",
+        "font-weight": "bold",
+    }
+
+
 Reactable(
     sleep[:6, :],
     columns=[
         Column(
             id="extra",
-            style=lambda val: {
-                "color": "#008800" if val > 0 else "#e00000",
-                "font-weight": "bold",
-            },
+            style=cond_style,
         )
     ],
 )
@@ -1367,11 +1374,6 @@ Reactable(
 * TODO: how far to go for pandas?
 * Display spanner index over names?
 
-```{python}
-# pd_expenditures = us_expenditures.to_pandas().set_index("index")
-# bigblock(Props(, ))
-```
-
 
 ```{python}
 # | label: rownames
@@ -1469,6 +1471,7 @@ Reactable(
 ## Language options
 
 ```{python}
+#| label: language
 from react_tables.models import Language
 
 Reactable(
@@ -1494,6 +1497,7 @@ Reactable(
 
 
 ```{python}
+#| label: language-global
 options.language = Language(
     pageSizeOptions="显示 {rows}",
     pageInfo="{rowStart} 至 {rowEnd} 项结果,共 {rows} 项",

docs/get-started/code-structure.qmd

@@ -1,29 +1,116 @@
 ---
-title: Code structure
+title: Code basics
 ---
 
+This page covers the basics of making a simple reactable table:
+
 ```{python}
+# | echo: false
 from react_tables import embed_css
 from react_tables.models import Reactable, ColGroup, Column, ColFormat, Theme, Language
 from react_tables.data import cars_93
 
 embed_css()
 
 cars = cars_93[:3, ["manufacturer", "model", "type", "price", "min_price", "max_price"]]
+
+fmt = ColFormat(prefix="$", digits=2)
+
+Reactable(
+    cars,
+    columns={
+        "manufacturer": Column(name="Manufacturer"),
+        "model": Column(name="Model"),
+        "type": Column(name="Type"),
+        "max_price": Column(name="Max", format=fmt),
+        "min_price": Column(name="Min", format=fmt),
+        "price": Column(name="Amount", format=fmt),
+    },
+    column_groups=[
+        ColGroup(
+            name="Price",
+            columns=["price", "min_price", "max_price"],
+        ),
+    ],
+    bordered=True,
+    theme=Theme(
+        backgroundColor="#ad85ff",
+    ),
+    language=Language(
+        pageNext="SLAM THE NEXT PAGE",
+        pagePrevious="GO BACK",
+    ),
+    filterable=True,
+    default_page_size=2,
+)
+
 ```
 
+* **Reactable controls**: filters for each column.
+* **Columns**: custom names, price columns formatted for currency.
+* **Column groups**: `"Price"` label above price related columns.
+* **Theme**: custom background color.
+* **Language**: customized text for next and previous page. 
+
+## Setup and data
+
+In order to create the table, we'll import classes from reactable, along with an example dataset.
+
+```{python}
+from react_tables import embed_css
+from react_tables.models import Reactable, ColGroup, Column, ColFormat, Theme, Language
+from react_tables.data import cars_93
+
+embed_css()
+
+cars = cars_93[:3, ["manufacturer", "model", "type", "price", "min_price", "max_price"]]
+```
+
+Note two important pieces:
+
+* `embed_css()` is currently required once, in order to add the necessary CSS.
+* `cars_93` is a tiny built-in DataFrame implementation called SimpleFrame.
+
+In this walkthrough, we'll turn the `cars` data directly into a reactable table. If you want to explore the data, use methods like `.to_polars()` or `.to_pandas()` to convert it to a Polars or Pandas DataFrame, respectively.
+
+```{python}
+cars.to_polars()
+```
+
+
+
+
 ## Reactable
 
+The `Reactable()` class is responsible for building the table:
+
 ```{python}
 Reactable(
     cars,
     filterable=True,
+    default_page_size=2,
 )
-
 ```
 
+The code above used `filterable=True` argument added filters to the top of each column, and `default_page_size=2` to limit each page to 2 rows.  `Reactable()` has many optional parameters, designed for quick customization of pieces like sorting, filtering, searching, and pagination.
+
+It also has four parameters which combine with other classes for configuration:
+
+| name | description |
+| ---- | ----------- |
+| `columns=` |  use `Column()` to customize column names, format, and more. | 
+| `column_groups=` | use `ColGroup()` to group columns together, with a label. |
+| `theme=` | use `Theme()` to customize table styling. |
+| `language=` | use `Language()` to customize prompts like "Next page". |
+
+The following sections walk through these four parameters in depth.
+
 ## Column definitions
 
+The `columns=` argument uses the `Column()` class to customize pieces like column name and value formatting (e.g. as a date or currency).
+
+Below, we configure the name and format of the `"max_price"` column:
+
 ```{python}
 Reactable(
     cars,
@@ -36,10 +123,13 @@ Reactable(
 )
 ```
 
-* data column name on left
-* relabel using `name=`
-* `format=` takes a ColFormat() object
+Notice these three pieces above:
 
+* `columns=` maps columns of data to `Column()` configurations.
+* `Column(name=...)` cleans up the name displayed to "Max Price"
+* `Column(format=...)` uses `ColFormat()` to specify how to format column values.
+
+The code above handled a single price column, but there are three related to price that need formatting. To avoid too much duplication, we can assign `ColFormat()` to a variable, and re-use that for each column definition.
 
 ```{python}
 fmt = ColFormat(prefix="$", digits=2)
@@ -79,6 +169,8 @@ Notice that the `"max_price"` column is not filterable.
 
 ## Column groups (ColGroup)
 
+The `column_groups=` argument uses the `ColGroup()` class to create groupings of columns. This allows you to put a custom label over related columns.
+
 ```{python}
 Reactable(
     cars,
@@ -93,6 +185,8 @@ Reactable(
 
 ## Theme
 
+The `theme=` argument uses the `Theme()` class to customize the overall style of the table.
+
 ```{python}
 Reactable(
     cars,
@@ -105,6 +199,8 @@ Reactable(
 
 ## Language
 
+The `language=` argument uses the `Language()` class to customize text prompts on the table like "Next Page".
+
 ```{python}
 Reactable(
     cars,
@@ -117,21 +213,22 @@ Reactable(
 
 ```
 
-## Renderers
-
-TODO
-
 ## Putting it all together
 
+In the sections above, we customized the columns, column groupings, theme, and language individually. Now we'll put it all together to make the complete table.
 
 ```{python}
+fmt = ColFormat(prefix="$", digits=2)
+
 Reactable(
     cars,
     columns={
-        "max_price": Column(
-            name="Max Price",
-            format=ColFormat(prefix="$", digits=2),
-        ),
+        "manufacturer": Column(name="Manufacturer"),
+        "model": Column(name="Model"),
+        "type": Column(name="Type"),
+        "max_price": Column(name="Max", format=fmt),
+        "min_price": Column(name="Min", format=fmt),
+        "price": Column(name="Amount", format=fmt),
     },
     column_groups=[
         ColGroup(

docs/get-started/extra-advanced-filters.qmd

@@ -0,0 +1,7 @@
+---
+title: Javascript filters
+---
+
+reactable supports advanced customization of filters and searchbars.
+See the R documentation on [Custom filtering](https://glin.github.io/reactable/articles/custom-filtering.html?q=filtermethod#column-filter-methods) for a tutorial with many examples.
+