sveltekit-ui 1.0.0

package/src/lib/Components/TableAdvanced/index.svelte.js

@@ -0,0 +1,1422 @@
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
+import { create_pagination_manager } from "$lib/Components/TableAdvanced/Pagination/index.svelte.js"
+import { create_sort_by_input_manager } from "$lib/Components/TableAdvanced/SortByInput/index.svelte.js"
+import { create_column_input_manager } from "$lib/Components/TableAdvanced/ColumnInput/index.svelte.js"
+import {
+  deep_copy,
+  copy_to_clipboard,
+  json_to_csv,
+  csv_to_json,
+  create_unique_id,
+  set_closurable,
+  get_data_type_at_path,
+  set_content_variables,
+} from "$lib/client/index.js"
+import { tick } from "svelte"
+import { browser } from "$app/environment"
+// tbd quick sort for column override default sort or work conjuction with
+// select bulk rows with condition (eg ["row","points"] greater_than 2000) where
+
+export function create_table_advanced_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let variables = $derived(set_closurable(config?.variables, null))
+  let loops = $derived(set_closurable(config?.loops, null))
+
+  let rows_data_from_variable_path = $state(null)
+  let row_input_content = $state(null)
+  let variables_data_type = $state(null)
+  let is_data_editable = $state(null)
+  let nav_items = $state(null)
+  let is_paginate = $state(null)
+  let is_more_to_load = $state(false)
+  let table_header_max_height = $state(null)
+  let table_row_max_height = $state(null)
+
+  let table_id = $state(null)
+  let table_name = $state(null)
+  let table_description = $state(null)
+  let settings_popover_manager = $state(null)
+  let settings_popover_toggle_button_manager = $state(null)
+  let settings_update_table_name_button_manager = $state(null)
+  let settings_update_table_name_text_input_manager = $state(null)
+  let settings_update_table_description_button_manager = $state(null)
+  let settings_update_table_description_text_input_manager = $state(null)
+  let settings_preempt_delete_table_popover_button_manager = $state(null)
+  let settings_delete_table_popover_manager = $state(null)
+  let settings_delete_table_cancel_button_manager = $state(null)
+  let settings_delete_table_button_manager = $state(null)
+  let settings_copy_table_id_button_manager = $state(null)
+
+  let columns_prepped = $state(null)
+  let column_ids_display_order = $state([])
+  let rows_prepped = $state(null)
+  let table_search_text_input_manager = $state(null)
+  let pagination_manager = $state(null)
+  let rows_per_page_dropdown_manager = $state(null)
+  let cur_page = $state(1)
+  let load_more_button_manager = $state(null)
+  let sort_by_input_manager = $state(null)
+  let is_bulk_select = $state(false)
+  let toggle_bulk_selectable_button_manager = $state(null)
+  let insert_popover_manager = $state(null)
+  let insert_popover_button_manager = $state(null)
+  let preempt_insert_column_popover_manager = $state(null)
+  let preempt_insert_column_button_manager = $state(null)
+  let preempt_insert_row_button_manager = $state(null)
+  let file_popover_manager = $state(null)
+  let file_popover_button_manager = $state(null)
+  let copy_json_button_manager = $state(null)
+  let download_json_button_manager = $state(null)
+  let download_csv_button_manager = $state(null)
+  let copy_structure_button_manager = $state(null)
+
+  let prempt_bulk_upload_rows_popover_button_manager = $state(null)
+  let prempt_bulk_upload_rows_popover_manager = $state(null)
+  let upload_rows_file_input_manager = $state(null)
+  let upload_rows_text_input_manager = $state(null)
+  let upload_rows_prepare_text_button_manager = $state(null)
+  let upload_rows_clear_prepared_data_button_manager = $state(null)
+  let bulk_insert_rows_error_message = $state(null)
+  let bulk_insert_rows_button_manager = $state(null)
+  let bulk_insert_rows_prepared_data = $state(null)
+  let bulk_select_all_rows_toggle_checkbox_manager = $state(null)
+  let bulk_delete_rows_popover_manager = $state(null)
+  let bulk_delete_rows_popover_button_manager = $state(null)
+  let bulk_delete_rows_button_manager = $state(null)
+  let bulk_delete_rows_cancel_button_manager = $state(null)
+
+  let column_edit_id = $state(null)
+  let column_edit_input_manager = $state(null)
+  let column_edit_upsert_column_button_manager = $state(null)
+
+  let row_edit_index = $state(null)
+  let preempt_insert_row_popover_manager = $state(null)
+  let row_edit_content_manager = $state(null)
+  let row_edit_upsert_row_button_manager = $state(null)
+  let row_edit_delete_row_are_you_sure_popover_manager = $state(null)
+  let row_edit_delete_row_are_you_sure_popover_toggle_button_manager = $state(null)
+  let row_edit_delete_row_button_manager = $state(null)
+  let row_edit_delete_row_cancel_button_manager = $state(null)
+  let is_loading_rows = $state(false)
+  let loading_rows_progress = $state(0)
+
+  let row_data_type = $derived(
+    get_data_type(variables_data_type, config?.val?.rows_data_from_variable_path ?? null)?.items
+  )
+
+  let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
+
+  function get_data_type(variables_data_type, data) {
+    let full_data_type = {
+      name: "Object",
+      type: "object_literal",
+      properties: {
+        variables: variables_data_type,
+        loops: { type: "loop" },
+      },
+    }
+    return get_data_type_at_path(data, full_data_type)
+  }
+
+  let row_indexes_display_order = $derived(get_available_row_indexes())
+  let row_indexes_display_order_shown = $derived(get_row_indexes_shown())
+
+  let rows_data = $derived(get_variable_from_path(set_closurable(rows_data_from_variable_path, null)))
+
+  let cur_page_to_use = $derived(
+    !Array.isArray(row_indexes_display_order) || row_indexes_display_order.length < rows_per_page_dropdown_manager?.val
+      ? 1
+      : cur_page
+  )
+
+  let row_indexes_bulk_selected = $derived(
+    Array.isArray(rows_prepped)
+      ? rows_prepped
+          .map((row_prepped, index) => (row_prepped?.bulk_select_checkbox_manager?.val ? index : null))
+          .filter((index) => index !== null)
+      : []
+  )
+
+  function get_variable_from_path(path, combined_variables_input = null) {
+    if (Array.isArray(path)) {
+      let combined_variables_loc = deep_copy(
+        combined_variables_input ?? {
+          variables: variables,
+          loops: loops,
+        }
+      )
+      for (let path_item of path) {
+        if (Array.isArray(path_item)) {
+          let sub_val_from_path = get_variable_from_path(path_item)
+          combined_variables_loc = combined_variables_loc?.[sub_val_from_path]
+        } else {
+          combined_variables_loc = combined_variables_loc?.[path_item]
+        }
+      }
+      return combined_variables_loc
+    }
+    return null
+  }
+
+  function get_available_row_indexes() {
+    let row_indexes = []
+    if (
+      Array.isArray(rows_prepped) &&
+      table_search_text_input_manager?.val &&
+      table_search_text_input_manager?.val.trim() !== ""
+    ) {
+      for (let i = 0; i < rows_prepped.length; i++) {
+        if (rows_prepped[i]?.searchable_text.includes(table_search_text_input_manager?.val.toLowerCase())) {
+          row_indexes.push(i)
+        }
+      }
+    } else {
+      row_indexes = Array.isArray(rows_prepped) ? Array.from({ length: rows_prepped.length }, (_, i) => i) : []
+    }
+    // tbd sort and sub sorts correctly
+    // if (Array.isArray(sort_by_input_manager?.val)) {
+    //   for (let sort_by_item of sort_by_input_manager?.val) {
+    //     // sort_by_item?.is_ascending
+    //     // sort_by_item?.data_row_variable_path
+    //     // const val_at_path = get_variable_from_path(sort_by_item?.data_row_variable_path)
+    //   }
+    // }
+    return row_indexes
+  }
+
+  function get_row_indexes_shown() {
+    if (!Array.isArray(row_indexes_display_order)) {
+      return []
+    } else if (row_indexes_display_order.length < rows_per_page_dropdown_manager?.val) {
+      return row_indexes_display_order
+    }
+    const start_index = (cur_page - 1) * rows_per_page_dropdown_manager?.val
+    const end_index = start_index + rows_per_page_dropdown_manager?.val
+    return row_indexes_display_order.slice(start_index, end_index)
+  }
+
+  const raf = () => (browser ? new Promise(requestAnimationFrame) : new Promise((r) => setTimeout(r, 0)))
+
+  async function set_rows_prepped(columns_prepped_input) {
+    is_loading_rows = true
+    rows_prepped = []
+    loading_rows_progress = 0
+    await tick()
+    await raf()
+    const chunk_size = 5
+    const total = Array.isArray(rows_data) ? rows_data?.length : 0
+    let rows_prepped_loc = []
+    for (let i = 0; i < total; i += chunk_size) {
+      const slice_end = Math.min(i + chunk_size, total)
+      for (let j = i; j < slice_end; j++) {
+        rows_prepped_loc.push(get_row_prepped(columns_prepped_input, rows_data[j], j))
+      }
+      rows_prepped = rows_prepped_loc
+      loading_rows_progress = slice_end / total
+      await tick()
+      await raf()
+    }
+    rows_prepped = rows_prepped_loc
+    loading_rows_progress = 1
+    is_loading_rows = false
+  }
+
+  function get_row_prepped(columns_prepped_input, row_data, row_i) {
+    let searchable_text = ""
+    let columns_prepped_loc = {}
+
+    if (Array.isArray(column_ids_display_order)) {
+      for (let column_id of column_ids_display_order) {
+        let content_manager = create_content_manager({
+          val: columns_prepped_input[column_id]?.body_content,
+          mapkit_js_token: mapkit_js_token,
+          on_event: (input) => {
+            if (typeof config?.on_event == "function") {
+              config?.on_event(input)
+            }
+          },
+          variables: () => variables,
+          loops: [row_i, ...(Array.isArray(loops) ? loops : [])],
+          // storage_path: () => storage_path,
+          // is_dark_theme: () => is_dark_theme,
+        })
+        columns_prepped_loc[column_id] = {
+          ...columns_prepped_input?.[column_id],
+          content_manager: content_manager,
+        }
+      }
+    }
+    // // astc_to_embedding_text tbd
+    searchable_text += `${JSON.stringify(row_data)}`?.toString().toLowerCase()
+    let preempt_edit_row_button_input_manager = $state(null)
+    let bulk_select_checkbox_manager = $state(null)
+    preempt_edit_row_button_input_manager = create_button_manager({
+      type: "soft",
+      support_icon: "edit",
+      is_uniform: true,
+      border_radius: 0.5,
+      aria_label: "edit",
+      icon_sw: 40,
+      min_height: 2.4,
+      on_click: () => {
+        preempt_insert_row_popover_manager.open()
+        edit_row(row_i)
+      },
+    })
+    bulk_select_checkbox_manager = create_checkbox_manager({
+      val: false,
+      mt: 0.2,
+      ml: 0.2,
+      mb: 0.2,
+    })
+    return {
+      row_i: row_i,
+      columns: columns_prepped_loc,
+      searchable_text: searchable_text,
+      preempt_edit_row_button_input_manager: preempt_edit_row_button_input_manager,
+      bulk_select_checkbox_manager: bulk_select_checkbox_manager,
+    }
+  }
+
+  function bulk_select_all_rows_toggle(is_select_all = true) {
+    if (Array.isArray(rows_prepped) && rows_prepped.length > 0) {
+      for (let i = 0; i < rows_prepped.length; i++) {
+        rows_prepped[i].bulk_select_checkbox_manager.set_val(is_select_all)
+      }
+    }
+  }
+
+  function set_table_search_text_input(input) {
+    table_search_text_input_manager.set_val(input)
+  }
+
+  function set_columns_prepped(columns) {
+    column_ids_display_order = Object.entries(columns || {})
+      .sort((a, b) => a[1]?.display_order - b[1]?.display_order)
+      .map((entry) => entry[0])
+    let columns_prepped_loc = {}
+    if (Array.isArray(column_ids_display_order)) {
+      for (let column_id of column_ids_display_order) {
+        let content_manager = create_content_manager({
+          val: columns[column_id]?.header_content,
+          mapkit_js_token: mapkit_js_token,
+          on_event: (input) => {
+            if (typeof config?.on_change == "function") {
+              config?.on_change(input)
+            }
+          },
+          variables: () => variables,
+          loops: loops,
+          // storage_path: () => storage_path,
+          // is_dark_theme: () => is_dark_theme,
+        })
+        let preempt_edit_column_button_manager = $state(null)
+        preempt_edit_column_button_manager = create_button_manager({
+          type: "soft",
+          support_icon: "three_dots",
+          icon_sw: 80,
+          icon_size: 1.4,
+          min_height: 2.4,
+          border_radius: 0.5,
+          is_uniform: true,
+          on_click: () => {
+            edit_column(column_id)
+            preempt_insert_column_popover_manager.open()
+          },
+        })
+        columns_prepped_loc[column_id] = {
+          ...columns[column_id],
+          content_manager: content_manager,
+          preempt_edit_column_button_manager: preempt_edit_column_button_manager,
+        }
+      }
+    }
+    columns_prepped = columns_prepped_loc
+    return columns_prepped
+  }
+
+  function copy_json() {
+    copy_to_clipboard(JSON.stringify(rows_data))
+  }
+
+  function copy_structure() {
+    copy_to_clipboard(JSON.stringify(rows_data))
+  }
+
+  function download_json() {
+    const json_string = JSON.stringify(rows_data)
+    const data_blob = new Blob([json_string], { type: "application/json" })
+    const url = URL.createObjectURL(data_blob)
+    const link = document.createElement("a")
+    link.href = url
+    const filename = "data.json"
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function download_csv() {
+    const json_string = JSON.stringify(rows_data)
+    const csv = json_to_csv(json_string)
+    const data_blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
+    const url = URL.createObjectURL(data_blob)
+    const link = document.createElement("a")
+    link.href = url
+    const filename = "data.csv"
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function edit_column(column_id) {
+    column_edit_id = column_id || null
+    const column = columns_prepped?.[column_id]
+    column_edit_input_manager = create_column_input_manager({
+      column_id: column_id,
+      val: {
+        header_content: column?.header_content,
+        body_content: column?.body_content,
+        description: column?.description,
+        is_shown: column?.is_shown,
+        is_fixed: column?.is_fixed,
+        alignment: column?.alignment,
+        min_width: column?.min_width,
+        max_width: column?.max_width,
+        display_order: column?.display_order,
+        is_db_column: column?.is_db_column,
+        db_data_type: column?.db_data_type,
+        is_use_in_short_display: column?.is_use_in_short_display,
+        is_autogenerated: column?.is_autogenerated,
+        is_updatable: column?.is_updatable,
+        postgres_type: column?.postgres_type,
+        default_value: column?.default_value,
+        quick_sort_variable_path: column?.quick_sort_variable_path,
+        is_primary_key: column?.is_primary_key,
+        is_nullable: column?.is_nullable,
+        is_force_uniqueness: column?.is_force_uniqueness,
+        foreign_table_id: column?.foreign_table_id,
+        is_cascade: column?.is_cascade,
+      },
+      column_input_options: config?.column_input_options,
+      table_options: config?.table_options,
+      on_search_table_row_ids: config?.on_search_table_row_ids,
+      variables_data_type: () => variables_data_type,
+      variables: () => variables,
+      loops: () => loops,
+      columns: () => columns_prepped,
+      rows_data_from_variable_path: () => rows_data_from_variable_path,
+      row_data_type: () => row_data_type,
+      on_delete: async () => {
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "delete_column",
+            column_id: column_id,
+            column: columns_prepped?.[column_id],
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            preempt_insert_column_popover_manager.show_temp_message(
+              "Successfully deleted column",
+              "success",
+              1800,
+              true,
+              () => {
+                let columns_prepped_copy = deep_copy(columns_prepped)
+                delete columns_prepped_copy[column_id]
+                const columns_prepped_loc = set_columns_prepped(columns_prepped_copy)
+                set_rows_prepped(columns_prepped_loc)
+                if (typeof res.finish == "function") {
+                  res.finish()
+                }
+              }
+            )
+          }
+          return res
+        }
+      },
+    })
+    let upsert_column_is_loading = $state(false)
+    column_edit_upsert_column_button_manager = create_button_manager({
+      text: column_id ? "Update Column" : "Insert Column",
+      is_loading: () => upsert_column_is_loading,
+      on_click: async () => {
+        upsert_column_is_loading = true
+        if (column_id) {
+          if (typeof config?.on_event == "function") {
+            const res = await config?.on_event({
+              type: "update_column",
+              column_id: column_id,
+              column: column_edit_input_manager?.val,
+              path: rows_data_from_variable_path,
+            })
+            if (res?.is_success) {
+              preempt_insert_column_popover_manager.show_temp_message(
+                "Successfully updated column",
+                "success",
+                1800,
+                true,
+                () => {
+                  let cleaned_columns = deep_copy(columns_prepped ?? {})
+                  delete cleaned_columns[column_id]
+                  cleaned_columns[res?.column_id] = res?.column
+                  const columns_prepped_loc = set_columns_prepped(cleaned_columns)
+                  set_rows_prepped(columns_prepped_loc)
+                }
+              )
+            } else {
+              preempt_insert_column_popover_manager.show_temp_message(
+                res?.message ?? "Error updating column",
+                "error",
+                1800,
+                false
+              )
+            }
+          }
+        } else {
+          if (typeof config?.on_event == "function") {
+            const res = await config?.on_event({
+              type: "insert_column",
+              column: column_edit_input_manager?.val,
+              path: rows_data_from_variable_path,
+            })
+            if (res?.is_success) {
+              preempt_insert_column_popover_manager.show_temp_message(
+                "Successfully inserted column",
+                "success",
+                1800,
+                true,
+                () => {
+                  let cleaned_columns = deep_copy(columns_prepped ?? {})
+                  cleaned_columns[res?.column_id] = res?.column
+                  const columns_prepped_loc = set_columns_prepped(cleaned_columns)
+                  set_rows_prepped(columns_prepped_loc)
+                }
+              )
+            } else {
+              console.log("insert_column_error_tbd", res)
+              preempt_insert_column_popover_manager.show_temp_message("Error inserting column", "error", 1800, false)
+            }
+          }
+        }
+        upsert_column_is_loading = false
+      },
+    })
+  }
+
+  function edit_row(row_i) {
+    row_edit_index = row_i
+    let variables_combined_loc = $state(
+      deep_copy({
+        variables,
+        loops: loops,
+      })
+    )
+    const path_to_set = [...rows_data_from_variable_path, typeof row_i == "number" ? row_i : 0]
+    if (typeof row_i != "number") {
+      let row_default_to_insert = null //tbd
+      let target = variables_combined_loc
+      for (let i = 0; i < path_to_set.length - 1; i++) {
+        target = target[path_to_set[i]]
+        if (target === undefined) break
+      }
+      const last_key = path_to_set[path_to_set.length - 1]
+      if (Array.isArray(target[last_key])) {
+        target[last_key].splice(0, 0, row_default_to_insert)
+      } else {
+        target[last_key] = row_default_to_insert
+      }
+    }
+    row_edit_content_manager = null
+    setTimeout(() => {
+      // quick fix for when update row then edit a diff row the data for other doesnt remain in place
+      row_edit_content_manager = create_content_manager({
+        val: row_input_content ?? null,
+        storage_items: null, // tbd
+        table_options: config?.table_options,
+        mapkit_js_token: mapkit_js_token,
+        on_search_table_row_ids: config?.on_search_table_row_ids,
+        variables_data_type: () => variables_data_type,
+        variables: () => variables_combined_loc?.variables,
+        loops: () => [row_i ?? 0, ...(Array.isArray(loops) ? loops : [])],
+        on_event: (input) => {
+          console.log("on_event00", input)
+          const res = set_content_variables(input, variables_combined_loc)
+          variables_combined_loc.variables = res?.variables
+          const row_data = get_variable_from_path(path_to_set, variables_combined_loc)
+          return {
+            is_success: true,
+            data: {
+              row_data,
+            },
+          }
+        },
+      })
+    })
+    let upsert_row_is_loading = $state(false)
+    row_edit_upsert_row_button_manager = create_button_manager({
+      text: typeof row_i == "number" ? "Update Row" : "Insert Row",
+      is_loading: () => upsert_row_is_loading,
+      on_click: async () => {
+        upsert_row_is_loading = true
+        const row_data = get_variable_from_path(path_to_set, variables_combined_loc)
+        if (typeof row_i == "number") {
+          if (typeof config?.on_event == "function") {
+            const res = await config?.on_event({
+              type: "update_row",
+              row_i: row_i,
+              row: row_data,
+              path: path_to_set,
+            })
+            if (res?.is_success) {
+              preempt_insert_row_popover_manager.show_temp_message(
+                "Successfully updated row",
+                "success",
+                1800,
+                true,
+                () => {
+                  const row_prepped = get_row_prepped(columns_prepped, res?.row, row_i)
+                  rows_prepped[row_prepped?.row_i] = row_prepped
+                }
+              )
+            } else {
+              preempt_insert_row_popover_manager.show_temp_message(
+                res?.message ? `Error updating row: ${res?.message}` : "Error updating row",
+                "error",
+                1800,
+                false
+              )
+            }
+          }
+        } else {
+          if (typeof config?.on_event == "function") {
+            const res = await config?.on_event({
+              type: "insert_row",
+              row: row_data,
+              path: path_to_set,
+            })
+            if (res?.is_success) {
+              preempt_insert_row_popover_manager.show_temp_message(
+                "Successfully inserted row",
+                "success",
+                1800,
+                true,
+                () => set_rows_prepped(columns_prepped)
+              )
+            } else {
+              console.log("insert_row_error_tbd", res)
+              preempt_insert_row_popover_manager.show_temp_message("Error insering row", "error", 1800, false)
+            }
+          }
+        }
+        upsert_row_is_loading = false
+      },
+    })
+    let delete_row_is_loading = $state(false)
+    row_edit_delete_row_are_you_sure_popover_manager = create_popover_manager({
+      type: "center",
+      min_width: 280,
+      target_width: 300,
+      min_height: 280,
+      target_height: 300,
+      header: "Are You Sure?",
+    })
+    row_edit_delete_row_are_you_sure_popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "trashcan",
+      color: "var(--error-t)",
+      is_compressed: true,
+      text: "Delete Row",
+      mt: 5,
+      is_loading: () => delete_row_is_loading,
+      popover_target: `popover_${row_edit_delete_row_are_you_sure_popover_manager?.id}`,
+    })
+    row_edit_delete_row_button_manager = create_button_manager({
+      color: "var(--error-t)",
+      text: "Delete Row",
+      mb: 1,
+      is_loading: () => delete_row_is_loading,
+      on_click: async () => {
+        delete_row_is_loading = true
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "delete_row",
+            path: [...rows_data_from_variable_path, row_i],
+          })
+          if (res?.is_success) {
+            row_edit_delete_row_are_you_sure_popover_manager.show_temp_message(
+              res?.message ?? "Successfully Deleted Row",
+              "success",
+              1800,
+              true,
+              () => set_rows_prepped(columns_prepped)
+            )
+            preempt_insert_row_popover_manager.close()
+          } else {
+            row_edit_delete_row_are_you_sure_popover_manager.show_temp_message(
+              res?.message ?? "Error Deleting Row",
+              "error"
+            )
+          }
+        }
+        delete_row_is_loading = false
+      },
+    })
+    row_edit_delete_row_cancel_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Cancel",
+      on_click: () => row_edit_delete_row_are_you_sure_popover_manager.close(),
+    })
+  }
+
+  function set_attributes(attributes) {
+    rows_data_from_variable_path = attributes?.rows_data_from_variable_path
+    row_input_content = attributes?.row_input_content
+    variables_data_type = attributes?.variables_data_type
+    is_data_editable = attributes?.is_data_editable ?? false
+    nav_items = Array.isArray(attributes?.nav_items)
+      ? attributes.nav_items.filter((item) =>
+          [
+            "settings",
+            "search",
+            "insert",
+            "file",
+            "bulk_select",
+            "sort_by",
+            "pagination",
+            "rows_per_page",
+            "load_more",
+          ].includes(item)
+        )
+      : null
+    is_paginate = attributes?.is_paginate ?? null
+    is_more_to_load = attributes?.is_more_to_load ?? false
+    table_header_max_height = attributes?.table_header_max_height ?? null
+    table_row_max_height = attributes?.table_row_max_height ?? null
+    const columns_prepped_loc = set_columns_prepped(attributes?.columns)
+    set_rows_prepped(columns_prepped_loc)
+  }
+
+  function init(config) {
+    table_id = config?.table_id
+    table_name = config?.table_name
+    table_description = config?.table_description
+    set_attributes(config)
+    table_search_text_input_manager = create_text_input_manager({
+      type: "search",
+      placeholder: "Search",
+    })
+    let load_more_is_loading = $state(false)
+    load_more_button_manager = create_button_manager({
+      type: "soft",
+      text: "Load More",
+      is_loading: () => load_more_is_loading,
+      on_click: async () => {
+        load_more_is_loading = true
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "load_more",
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            load_more_button_manager.success_trigger()
+            set_rows_prepped(columns_prepped)
+            is_more_to_load = res?.is_more_to_load
+          } else {
+            load_more_button_manager.error_trigger()
+          }
+        }
+        load_more_is_loading = false
+      },
+    })
+    pagination_manager = create_pagination_manager({
+      cur_page: () => cur_page_to_use,
+      total_pages: () => {
+        if (Array.isArray(row_indexes_display_order)) {
+          return Math.ceil(row_indexes_display_order.length / rows_per_page_dropdown_manager?.val)
+        } else {
+          return 1
+        }
+      },
+      on_change: (input) => (cur_page = input),
+    })
+    rows_per_page_dropdown_manager = create_dropdown_manager({
+      val: config?.rows_per_page ?? 100,
+      is_button_compressed: true,
+      target_width: 80,
+      options: [2, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000],
+    })
+    sort_by_input_manager = create_sort_by_input_manager({
+      is_popover: true,
+      val: config?.val?.sort_by,
+      // row_data_type: row_data_type,
+    })
+    toggle_bulk_selectable_button_manager = create_button_manager({
+      type: "soft",
+      text: () => (is_bulk_select ? "Hide Bulk Select" : "Bulk Select"),
+      on_click: () => (is_bulk_select = !is_bulk_select),
+    })
+    insert_popover_manager = create_popover_manager({
+      type: "dropdown",
+      min_width: 180,
+      target_width: 200,
+      min_height: 160,
+      target_height: 160,
+      header: "Insert",
+      anchor_id: () => `button_${insert_popover_button_manager?.id}`,
+    })
+    insert_popover_button_manager = create_button_manager({
+      type: "soft",
+      text: "Insert",
+      is_compressed: true,
+      popover_target: () => `popover_${insert_popover_manager?.id}`,
+    })
+    preempt_insert_column_popover_manager = create_popover_manager({
+      type: "panel",
+      target_width: 600,
+      header: () => (column_edit_id ? `Edit Column ${column_edit_id}` : "Create Column"),
+      on_open: () => insert_popover_manager.close(),
+    })
+    preempt_insert_column_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Insert Column",
+      icon_deg: 90,
+      support_icon: "row_item",
+      popover_target: () => `popover_${preempt_insert_column_popover_manager?.id}`,
+      on_click: () => edit_column(),
+    })
+    preempt_insert_row_popover_manager = create_popover_manager({
+      type: "panel",
+      target_width: 600,
+      header: () => (typeof row_edit_index == "number" ? `Update Row ${row_edit_index}` : "Insert Row"),
+      on_open: () => insert_popover_manager.close(),
+    })
+    preempt_insert_row_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Insert Row",
+      support_icon: "row_item",
+      popover_target: () => `popover_${preempt_insert_row_popover_manager?.id}`,
+      on_click: () => edit_row(),
+    })
+    file_popover_manager = create_popover_manager({
+      type: "dropdown",
+      min_width: 180,
+      target_width: 200,
+      min_height: 160,
+      target_height: 200,
+      header: "File",
+      anchor_id: () => `button_${file_popover_button_manager?.id}`,
+    })
+    file_popover_button_manager = create_button_manager({
+      type: "soft",
+      text: "File",
+      support_icon: "file",
+      is_compressed: true,
+      popover_target: () => `popover_${file_popover_manager?.id}`,
+    })
+    copy_json_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Copy JSON",
+      support_icon: "clipboard",
+      is_success_animation: true,
+      on_click: () => copy_json(),
+    })
+    download_json_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Download JSON",
+      support_icon: "download",
+      is_success_animation: true,
+      on_click: () => download_json(),
+    })
+    download_csv_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Download CSV",
+      support_icon: "download",
+      is_success_animation: true,
+      on_click: () => download_csv(),
+    })
+    copy_structure_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Copy Structure",
+      support_icon: "clipboard",
+      is_success_animation: true,
+      on_click: () => copy_structure(),
+    })
+    prempt_bulk_upload_rows_popover_manager = create_popover_manager({
+      type: "panel",
+      target_width: 600,
+      header: "Bulk Upload and Insert Rows",
+      on_open: () => insert_popover_manager.close(),
+    })
+    prempt_bulk_upload_rows_popover_button_manager = create_button_manager({
+      type: "soft",
+      text_align: "left",
+      text: "Insert Bulk Rows",
+      support_icon: "row_item",
+      popover_target: () => `popover_${prempt_bulk_upload_rows_popover_manager?.id}`,
+    })
+    upload_rows_file_input_manager = create_file_input_manager({
+      label: "json or csv upload",
+      accept: ["application/json", "text/csv"],
+      is_multiselect: false,
+      is_drop_zone: false,
+      on_get_file: (input) => {
+        const reader = new FileReader()
+        reader.readAsText(input)
+        reader.onload = function (event) {
+          const file_content = event.target.result
+          const file_type = input?.type
+          if (file_type === "application/json") {
+            bulk_insert_rows_prepared_data = JSON.parse(file_content)
+          } else if (file_type === "text/csv") {
+            bulk_insert_rows_prepared_data = csv_to_json(file_content)
+          }
+        }
+      },
+    })
+    upload_rows_text_input_manager = create_text_input_manager({
+      type: "text_area",
+      label: "Data Input",
+      max_length: 1000000,
+      placeholder: '[{ "some_key": "some_value" }]',
+    })
+    upload_rows_prepare_text_button_manager = create_button_manager({
+      is_disabled: () => !upload_rows_text_input_manager?.val,
+      text: "Prepare Data",
+      is_compressed: true,
+      on_click: () => {
+        if (typeof upload_rows_text_input_manager?.val === "string") {
+          try {
+            bulk_insert_rows_prepared_data = JSON.parse(upload_rows_text_input_manager?.val)
+          } catch (e) {
+            bulk_insert_rows_prepared_data = upload_rows_text_input_manager?.val
+          }
+        } else if (typeof upload_rows_text_input_manager?.val === "number") {
+          bulk_insert_rows_prepared_data = upload_rows_text_input_manager?.val
+        } else {
+          bulk_insert_rows_prepared_data = deep_copy(upload_rows_text_input_manager?.val)
+        }
+      },
+    })
+    upload_rows_clear_prepared_data_button_manager = create_button_manager({
+      type: "outlined",
+      is_disabled: upload_rows_text_input_manager?.val,
+      text: "Clear Prepare Data",
+      is_compressed: true,
+      on_click: () => {
+        upload_rows_file_input_manager.clear_files()
+        bulk_insert_rows_prepared_data = null
+      },
+    })
+    let is_loading_bulk_insert_rows = $state(false)
+    bulk_insert_rows_button_manager = create_button_manager({
+      is_loading: () => is_loading_bulk_insert_rows,
+      is_disabled: () => !bulk_insert_rows_prepared_data,
+      text: "Bulk Insert Rows",
+      on_click: async () => {
+        is_loading_bulk_insert_rows = true
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "bulk_insert_rows",
+            rows: bulk_insert_rows_prepared_data,
+            path: [...rows_data_from_variable_path, 0],
+          })
+          if (res?.is_success) {
+            prempt_bulk_upload_rows_popover_manager.show_temp_message(
+              "Successfully bulk inserted rows",
+              "success",
+              1800,
+              true,
+              () => {
+                upload_rows_file_input_manager.clear_files()
+                bulk_insert_rows_prepared_data = null
+                set_rows_prepped(columns_prepped)
+              }
+            )
+          } else {
+            console.log("update_row_error_tbd", res)
+            prempt_bulk_upload_rows_popover_manager.show_temp_message("Error bulk inserting rows", "error", 1800, false)
+          }
+        }
+        is_loading_bulk_insert_rows = false
+      },
+    })
+    bulk_select_all_rows_toggle_checkbox_manager = create_checkbox_manager({
+      val: false,
+      mt: 0.2,
+      ml: 0.2,
+      mb: 0.2,
+      on_change: (input) => bulk_select_all_rows_toggle(input),
+    })
+    settings_popover_manager = create_popover_manager({
+      type: "dropdown",
+      target_width: 250,
+      target_height: 300,
+      anchor_id: () => `button_${settings_popover_toggle_button_manager?.id}`,
+    })
+    settings_popover_toggle_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "three_dots",
+      icon_sw: 70,
+      is_uniform: true,
+      popover_target: () => `popover_${settings_popover_manager?.id}`,
+    })
+    let is_loading_update_table_name = $state(false)
+    settings_update_table_name_text_input_manager = create_text_input_manager({
+      is_popover: true,
+      popover_header: "Edit Table Name",
+      placeholder: "Table Name",
+      val: table_name,
+      update_button_text: "Update Table Name",
+      is_loading: () => is_loading_update_table_name,
+      on_finish: async (input) => {
+        if (typeof config?.on_event == "function") {
+          is_loading_update_table_name = true
+          const res = await config?.on_event({
+            type: "update_table_name",
+            table_name: input,
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            table_name = res?.table_name
+            settings_update_table_name_text_input_manager.popover_manager.show_temp_message(
+              "Successfully updated table name",
+              "success"
+            )
+          } else {
+            console.log("error updating table name")
+            settings_update_table_name_text_input_manager.popover_manager.show_temp_message(
+              "Error updating table name",
+              "error",
+              1800,
+              false
+            )
+          }
+          is_loading_update_table_name = false
+          return res
+        }
+      },
+    })
+    settings_update_table_name_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "edit",
+      is_uniform: true,
+      border_radius: 0.5,
+      aria_label: "edit",
+      icon_sw: 40,
+      min_height: 2.4,
+      popover_target: () => `popover_${settings_update_table_name_text_input_manager?.popover_manager?.id}`,
+    })
+    let is_loading_update_table_description = $state(false)
+    settings_update_table_description_text_input_manager = create_text_input_manager({
+      is_popover: true,
+      popover_header: "Edit Table Description",
+      placeholder: "Some Table Description",
+      val: table_description,
+      update_button_text: "Update Table Description",
+      is_loading: () => is_loading_update_table_description,
+      on_finish: async (input) => {
+        if (typeof config?.on_event == "function") {
+          is_loading_update_table_description = true
+          const res = await config?.on_event({
+            type: "update_table_description",
+            table_description: input,
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            table_description = res?.table_description
+            settings_update_table_description_text_input_manager.popover_manager.show_temp_message(
+              "Successfully updated table description",
+              "success"
+            )
+          } else {
+            console.log("error updating table description")
+            settings_update_table_description_text_input_manager.popover_manager.show_temp_message(
+              "Error updating table name",
+              "error",
+              1800,
+              false
+            )
+          }
+          is_loading_update_table_description = false
+          return res
+        }
+      },
+    })
+    settings_update_table_description_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "edit",
+      is_uniform: true,
+      border_radius: 0.5,
+      aria_label: "edit",
+      icon_sw: 40,
+      min_height: 2.4,
+      popover_target: () => `popover_${settings_update_table_description_text_input_manager?.popover_manager?.id}`,
+    })
+    let delete_table_is_loading = $state(false)
+    settings_delete_table_popover_manager = create_popover_manager({
+      type: "center",
+      min_width: 280,
+      target_width: 300,
+      min_height: 280,
+      target_height: 300,
+      header: "Are You Sure?",
+    })
+    settings_preempt_delete_table_popover_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "trashcan",
+      color: "var(--error-t)",
+      is_compressed: true,
+      text: "Delete Table",
+      mt: 5,
+      is_loading: () => delete_table_is_loading,
+      popover_target: `popover_${settings_delete_table_popover_manager?.id}`,
+    })
+    settings_copy_table_id_button_manager = create_button_manager({
+      type: "outlined",
+      is_uniform: true,
+      is_success_animation: true,
+      support_icon: "clipboard",
+      on_click: () => copy_to_clipboard(table_id),
+    })
+    settings_delete_table_button_manager = create_button_manager({
+      color: "var(--error-t)",
+      text: "Delete Table",
+      mb: 1,
+      is_loading: () => delete_table_is_loading,
+      on_click: async () => {
+        delete_table_is_loading = true
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "delete_table",
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            settings_delete_table_popover_manager.show_temp_message(res?.message ?? "Successfully Deleted Table")
+            if (typeof res?.finish == "function") {
+              res?.finish()
+            }
+          } else {
+            // error_message
+            settings_delete_table_popover_manager.show_temp_message(res?.message ?? "Error deleting table", "error")
+          }
+        }
+        delete_table_is_loading = false
+      },
+    })
+    settings_delete_table_cancel_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Cancel",
+      on_click: () => settings_delete_table_popover_manager.close(),
+    })
+    let bulk_delete_rows_is_loading = $state(false)
+    bulk_delete_rows_popover_manager = create_popover_manager({
+      type: "center",
+      min_width: 280,
+      target_width: 300,
+      min_height: 280,
+      target_height: 300,
+      header: "Are You Sure?",
+    })
+    bulk_delete_rows_popover_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "trashcan",
+      color: "var(--error-t)",
+      is_compressed: true,
+      text: () => `Delete ${Array.isArray(row_indexes_bulk_selected) ? row_indexes_bulk_selected.length : ""} rows`,
+      is_disabled: () => !(Array.isArray(row_indexes_bulk_selected) && row_indexes_bulk_selected.length > 0),
+      is_loading: () => bulk_delete_rows_is_loading,
+      popover_target: `popover_${bulk_delete_rows_popover_manager?.id}`,
+    })
+    bulk_delete_rows_button_manager = create_button_manager({
+      color: "var(--error-t)",
+      text: () => `Delete ${Array.isArray(row_indexes_bulk_selected) ? row_indexes_bulk_selected.length : "0"} rows`,
+      mb: 1,
+      is_disabled: () => !(Array.isArray(row_indexes_bulk_selected) && row_indexes_bulk_selected.length > 0),
+      is_loading: () => bulk_delete_rows_is_loading,
+      on_click: async () => {
+        bulk_delete_rows_is_loading = true
+        if (typeof config?.on_event == "function") {
+          const res = await config?.on_event({
+            type: "bulk_delete_rows",
+            row_indexes: row_indexes_bulk_selected,
+            path: rows_data_from_variable_path,
+          })
+          if (res?.is_success) {
+            bulk_delete_rows_popover_manager.show_temp_message(
+              res?.message ?? "Successfully Deleted Rows",
+              "success",
+              1800,
+              true,
+              () => {
+                set_rows_prepped(columns_prepped)
+              }
+            )
+          } else {
+            // error_message
+            bulk_delete_rows_popover_manager.show_temp_message(res?.message ?? "Error deleting rows", "error")
+          }
+        }
+        bulk_delete_rows_is_loading = false
+      },
+    })
+    bulk_delete_rows_cancel_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Cancel",
+      on_click: () => bulk_delete_rows_popover_manager.close(),
+    })
+    edit_column()
+  }
+
+  init(config)
+
+  return {
+    id,
+    get table_id() {
+      return table_id
+    },
+    get table_name() {
+      return table_name
+    },
+    get table_description() {
+      return table_description
+    },
+    get is_data_editable() {
+      return is_data_editable
+    },
+    get nav_items() {
+      return nav_items
+    },
+    get is_paginate() {
+      return is_paginate
+    },
+    get table_header_max_height() {
+      return table_header_max_height
+    },
+    get table_row_max_height() {
+      return table_row_max_height
+    },
+    get table_search_text_input_manager() {
+      return table_search_text_input_manager
+    },
+    get is_more_to_load() {
+      return is_more_to_load
+    },
+    get load_more_button_manager() {
+      return load_more_button_manager
+    },
+    get pagination_manager() {
+      return pagination_manager
+    },
+    get rows_per_page_dropdown_manager() {
+      return rows_per_page_dropdown_manager
+    },
+    get sort_by_input_manager() {
+      return sort_by_input_manager
+    },
+    get insert_popover_manager() {
+      return insert_popover_manager
+    },
+    get insert_popover_button_manager() {
+      return insert_popover_button_manager
+    },
+    get preempt_insert_column_popover_manager() {
+      return preempt_insert_column_popover_manager
+    },
+    get preempt_insert_column_button_manager() {
+      return preempt_insert_column_button_manager
+    },
+    get preempt_insert_row_button_manager() {
+      return preempt_insert_row_button_manager
+    },
+    get file_popover_manager() {
+      return file_popover_manager
+    },
+    get file_popover_button_manager() {
+      return file_popover_button_manager
+    },
+    get copy_json_button_manager() {
+      return copy_json_button_manager
+    },
+    get download_json_button_manager() {
+      return download_json_button_manager
+    },
+    get download_csv_button_manager() {
+      return download_csv_button_manager
+    },
+    get copy_structure_button_manager() {
+      return copy_structure_button_manager
+    },
+    get prempt_bulk_upload_rows_popover_button_manager() {
+      return prempt_bulk_upload_rows_popover_button_manager
+    },
+    get prempt_bulk_upload_rows_popover_manager() {
+      return prempt_bulk_upload_rows_popover_manager
+    },
+    get upload_rows_file_input_manager() {
+      return upload_rows_file_input_manager
+    },
+    get upload_rows_text_input_manager() {
+      return upload_rows_text_input_manager
+    },
+    get upload_rows_prepare_text_button_manager() {
+      return upload_rows_prepare_text_button_manager
+    },
+    get upload_rows_clear_prepared_data_button_manager() {
+      return upload_rows_clear_prepared_data_button_manager
+    },
+    get bulk_insert_rows_error_message() {
+      return bulk_insert_rows_error_message
+    },
+    get bulk_insert_rows_button_manager() {
+      return bulk_insert_rows_button_manager
+    },
+    get bulk_insert_rows_prepared_data() {
+      return bulk_insert_rows_prepared_data
+    },
+    get toggle_bulk_selectable_button_manager() {
+      return toggle_bulk_selectable_button_manager
+    },
+    get is_bulk_select() {
+      return is_bulk_select
+    },
+    get columns() {
+      return columns
+    },
+    get config() {
+      return config
+    },
+    get column_ids_display_order() {
+      return column_ids_display_order
+    },
+    get row_indexes_display_order() {
+      return row_indexes_display_order
+    },
+    get row_indexes_display_order_shown() {
+      return row_indexes_display_order_shown
+    },
+    get rows_prepped() {
+      return rows_prepped
+    },
+    get columns_prepped() {
+      return columns_prepped
+    },
+    get variables() {
+      return variables
+    },
+    get bulk_select_all_rows_toggle_checkbox_manager() {
+      return bulk_select_all_rows_toggle_checkbox_manager
+    },
+    get bulk_delete_rows_popover_manager() {
+      return bulk_delete_rows_popover_manager
+    },
+    get bulk_delete_rows_popover_button_manager() {
+      return bulk_delete_rows_popover_button_manager
+    },
+    get bulk_delete_rows_button_manager() {
+      return bulk_delete_rows_button_manager
+    },
+    get bulk_delete_rows_cancel_button_manager() {
+      return bulk_delete_rows_cancel_button_manager
+    },
+    get row_indexes_bulk_selected() {
+      return row_indexes_bulk_selected
+    },
+    get column_edit_id() {
+      return column_edit_id
+    },
+    get column_edit_input_manager() {
+      return column_edit_input_manager
+    },
+    get column_edit_upsert_column_button_manager() {
+      return column_edit_upsert_column_button_manager
+    },
+    get preempt_insert_row_popover_manager() {
+      return preempt_insert_row_popover_manager
+    },
+    get row_edit_index() {
+      return row_edit_index
+    },
+    get row_edit_content_manager() {
+      return row_edit_content_manager
+    },
+    get row_edit_upsert_row_button_manager() {
+      return row_edit_upsert_row_button_manager
+    },
+    get row_edit_delete_row_are_you_sure_popover_manager() {
+      return row_edit_delete_row_are_you_sure_popover_manager
+    },
+    get row_edit_delete_row_are_you_sure_popover_toggle_button_manager() {
+      return row_edit_delete_row_are_you_sure_popover_toggle_button_manager
+    },
+    get row_edit_delete_row_button_manager() {
+      return row_edit_delete_row_button_manager
+    },
+    get row_edit_delete_row_cancel_button_manager() {
+      return row_edit_delete_row_cancel_button_manager
+    },
+    get is_loading_rows() {
+      return is_loading_rows
+    },
+    get loading_rows_progress() {
+      return loading_rows_progress
+    },
+    get settings_popover_manager() {
+      return settings_popover_manager
+    },
+    get settings_popover_toggle_button_manager() {
+      return settings_popover_toggle_button_manager
+    },
+    get settings_update_table_name_button_manager() {
+      return settings_update_table_name_button_manager
+    },
+    get settings_update_table_name_text_input_manager() {
+      return settings_update_table_name_text_input_manager
+    },
+    get settings_update_table_description_button_manager() {
+      return settings_update_table_description_button_manager
+    },
+    get settings_update_table_description_text_input_manager() {
+      return settings_update_table_description_text_input_manager
+    },
+    get settings_preempt_delete_table_popover_button_manager() {
+      return settings_preempt_delete_table_popover_button_manager
+    },
+    get settings_delete_table_popover_manager() {
+      return settings_delete_table_popover_manager
+    },
+    get settings_delete_table_cancel_button_manager() {
+      return settings_delete_table_cancel_button_manager
+    },
+    get settings_copy_table_id_button_manager() {
+      return settings_copy_table_id_button_manager
+    },
+    get settings_delete_table_button_manager() {
+      return settings_delete_table_button_manager
+    },
+    get variables_data_type() {
+      return variables_data_type
+    },
+    init,
+    set_table_search_text_input,
+    set_rows_prepped,
+    set_columns_prepped,
+    copy_json,
+    download_json,
+    download_csv,
+    copy_structure,
+    set_attributes,
+  }
+}