== GETTING STARTED ==
1. Add the DataTable element to your page
2. Set the json field using:
  "[" + Search for Items:format as text + "]"
  Format per item: {"id": "ITEM_ID", "nom": "ITEM_NAME"}
  Delimiter: ,

3. Set columns_config:
  [{"title":"ID","data":"id"},{"title":"Nom","data":"nom"}]

== JSON FORMAT ==

Simple table:
[
 {"id":"1","nom":"Sam","email":"[email protected]"},
 {"id":"2","nom":"Ali","email":"[email protected]"}
]

With sub-table (nested list):
[
 {
   "id":"1",
   "nom":"Sam",
   "email":"[email protected]",
   "roles":[
     {"id":"1","nom":"Admin","code":"ADM"},
     {"id":"2","nom":"Manager","code":"MGR"}
   ]
 }
]

== COLUMNS CONFIG ==

Basic:
[{"title":"ID","data":"id"},{"title":"Nom","data":"nom"}]

The "data" value must match exactly the key in your JSON.

== SUB-TABLE ==

1. Set show_sub_table = true
2. Set sub_table_field = roles (the key in your JSON)
3. Set sub_columns_config:
  [{"title":"Nom","data":"nom"},{"title":"Code","data":"code"}]

== EXPORT ==

- show_export_excel = true → shows Excel button
- show_export_pdf = true → shows PDF button
- No rows checked → exports entire table
- Rows checked → exports only selected rows

== CHECKBOX SELECTION ==

Set show_checkbox = true to enable row selection.
Use the header checkbox to select/deselect all rows.

== COLORS AND THEME ==

Customize the table appearance:
- header_bg_color → header background color
- header_text_color → header text color
- row_odd_color → odd rows background
- row_even_color → even rows background (when stripe_rows = true)
- hover_color → row hover color (when hover_effect = true)
- border_color → cell border color
- text_color → cell text color
- font_size → text size in pixels (default: 14)

== ROW CLICK EVENT ==

Use the row_clicked event in your workflows to trigger actions.
Access clicked row data via:
- selected_row_data → full JSON of the clicked row
- selected_row_index → row number (starts at 1)

Extract a field using regex:
- id    → (?<="id":")[^"]*
- nom   → (?<="nom":")[^"]*
- email → (?<="email":")[^"]*

== DEBUG ==

Connect a Text element to DataTable's debug_json
to see the raw JSON received by the plugin.
Useful to verify your data structure.

== TIPS ==

- Use Plain text editor (not Rich text) in Bubble
 when building your JSON expression
- Always check that "data" keys in columns_config
 match exactly the keys in your JSON
- For nested lists, use [ before and ] after
 the Search:format as text expression
- Delimiter between main items: ,
- Delimiter between sub-items: ,

== SUPPORT ==

If you encounter issues:
1. Open F12 → Console in your browser
2. Check the debug_json exposed state
3. Verify your JSON structure is valid at jsonlint.com