Table

<% columns = [
  { title: "Name", data_index: :name, key: :name },
  { title: "Age", data_index: :age, key: :age },
  { title: "Address", data_index: :address, key: :address },
  {
    title: "Action",
    key: :action,
    render: ->(_value, row, _index) { "Edit #{row[:name]}" }
  }
] %>
<% data = [
  { key: "1", name: "Juan Perez", age: 32, address: "Madrid" },
  { key: "2", name: "Maria Lopez", age: 28, address: "Barcelona" },
  { key: "3", name: "Carlos Ruiz", age: 45, address: "Valencia" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  title: "Users"
) %>

<% data = [
  { key: "1", name: "Alonso", age: 29, address: "Bogota" },
  { key: "2", name: "Camila", age: 31, address: "Medellin" }
] %>

<%= render Hakumi::Table::Component.new(data_source: data) do |table| %>
  <% table.with_column(title: "Name", data_index: :name, key: :name) %>
  <% table.with_group(title: "Info") do |group| %>
    <% group.with_column(title: "Age", data_index: :age, key: :age) %>
    <% group.with_column(title: "Address", data_index: :address, key: :address) %>
  <% end %>
<% end %>

<% columns = [
  { title: "Name", data_index: :name, key: :name },
  { title: "Role", data_index: :role, key: :role },
  { title: "Team", data_index: :team, key: :team }
] %>
<% data = [
  { key: "1", name: "Sofia", role: "Designer", team: "UX" },
  { key: "2", name: "Luis", role: "Engineer", team: "Core" },
  { key: "3", name: "Ana", role: "PM", team: "Growth" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  row_selection: {
    type: :checkbox,
    selected_row_keys: [ "1" ],
    selections: true
  }
) %>

<% columns = [
  { title: "Name", data_index: :name, key: :name, sorter: true },
  { title: "Age", data_index: :age, key: :age, sorter: true },
  {
    title: "City",
    data_index: :city,
    key: :city,
    filters: [
      { text: "Madrid", value: "Madrid" },
      { text: "Lisbon", value: "Lisbon" }
    ]
  }
] %>
<% data = [
  { key: "1", name: "Pablo", age: 33, city: "Madrid" },
  { key: "2", name: "Rita", age: 27, city: "Lisbon" },
  { key: "3", name: "Nora", age: 41, city: "Madrid" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data
) %>

<% columns = [
  { title: "Name", data_index: :name, key: :name },
  { title: "Department", data_index: :department, key: :department }
] %>
<% data = [
  { key: "1", name: "Diego", department: "Finance", details: "Full-time, Madrid" },
  { key: "2", name: "Lucia", department: "Engineering", details: "Remote, Porto" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  expandable: {
    expanded_row_keys: [ "1" ],
    expanded_row_render: ->(row, _index) { "Details: #{row[:details]}" }
  }
) %>

<% # Parent table columns %>
<% parent_columns = [
  { title: "Name", data_index: :name, key: :name, width: "30%" },
  { title: "Department", data_index: :department, key: :department, width: "30%" },
  { title: "Team Size", data_index: :team_size, key: :team_size, width: "20%" }
] %>

<% # Child table columns (for nested table) %>
<% child_columns = [
  { title: "Member", data_index: :member_name, key: :member_name },
  { title: "Role", data_index: :role, key: :role },
  { title: "Email", data_index: :email, key: :email }
] %>

<% # Parent data with nested team members %>
<% parent_data = [
  { 
    key: "1", 
    name: "Diego Martinez", 
    department: "Engineering", 
    team_size: 3,
    team_members: [
      { key: "1-1", member_name: "Ana Garcia", role: "Senior Developer", email: "ana@company.com" },
      { key: "1-2", member_name: "Carlos Lopez", role: "Developer", email: "carlos@company.com" },
      { key: "1-3", member_name: "Maria Ruiz", role: "Junior Developer", email: "maria@company.com" }
    ]
  },
  { 
    key: "2", 
    name: "Lucia Fernandez", 
    department: "Design", 
    team_size: 2,
    team_members: [
      { key: "2-1", member_name: "Pedro Sanchez", role: "UI Designer", email: "pedro@company.com" },
      { key: "2-2", member_name: "Sofia Torres", role: "UX Designer", email: "sofia@company.com" }
    ]
  },
  { 
    key: "3", 
    name: "Roberto Silva", 
    department: "Marketing", 
    team_size: 4,
    team_members: [
      { key: "3-1", member_name: "Laura Gomez", role: "Content Manager", email: "laura@company.com" },
      { key: "3-2", member_name: "Miguel Castro", role: "SEO Specialist", email: "miguel@company.com" },
      { key: "3-3", member_name: "Elena Morales", role: "Social Media", email: "elena@company.com" },
      { key: "3-4", member_name: "Juan Diaz", role: "Analytics", email: "juan@company.com" }
    ]
  }
] %>

<div style="margin-bottom: 32px">
  <h3>Nested Tables</h3>
  <p>Click the expand icon to see team members in a nested table.</p>
  
  <%= render Hakumi::Table::Component.new(
    id: "nested-table-parent",
    columns: parent_columns,
    data_source: parent_data,
    bordered: true,
    expandable: {
      expanded_row_keys: ["1"],
      expanded_row_render: ->(row, _index) {
        render(Hakumi::Table::Component.new(
          columns: child_columns,
          data_source: row[:team_members],
          size: :small,
          bordered: true,
          show_header: true
        ))
      }
    }
  ) %>
</div>

<div style="margin-bottom: 32px">
  <h3>Nested Tables with Pagination</h3>
  <p>Nested table can also have its own pagination and features.</p>
  
  <%= render Hakumi::Table::Component.new(
    id: "nested-table-paginated",
    columns: parent_columns,
    data_source: parent_data,
    bordered: true,
    pagination: { current: 1, page_size: 2, total: 3 },
    expandable: {
      expanded_row_render: ->(row, _index) {
        render(Hakumi::Table::Component.new(
          columns: child_columns,
          data_source: row[:team_members],
          size: :small,
          bordered: true,
          pagination: { current: 1, page_size: 2, total: row[:team_members].length }
        ))
      }
    }
  ) %>
</div>

<% columns = [
  { title: "Name", data_index: :name, key: :name },
  { title: "Status", data_index: :status, key: :status }
] %>
<% data = [
  { key: "1", name: "Olivia", status: "Active" },
  { key: "2", name: "Mateo", status: "Inactive" }
] %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Table::Component.new(columns: columns, data_source: data, size: :middle, bordered: true) %>
  <% end %>
  <% space.with_item do %>
    <%= render Hakumi::Table::Component.new(columns: columns, data_source: data, size: :small, bordered: true) %>
  <% end %>
<% end %>

<% columns = [
  { title: "Product", data_index: :product, key: :product },
  { title: "Qty", data_index: :quantity, key: :quantity, sorter: true }
] %>
<% data = [
  { key: "1", product: "Notebook", quantity: 4 },
  { key: "2", product: "Monitor", quantity: 2 },
  { key: "3", product: "Chair", quantity: 6 },
  { key: "4", product: "Desk", quantity: 1 }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  summary: "Total items: #{data.sum { |row| row[:quantity] }}",
  pagination: { current: 1, page_size: 3, total: 4 }
) %>

<div id="table-programmatic-target"></div>

<%= render Hakumi::Button::Component.new(
  type: :primary,
  id: "table-programmatic-button"
) do %>
  Render programmatically
<% end %>

<script>
  (() => {
    const targetSelector = "#table-programmatic-target"
    const buttonId = "table-programmatic-button"
    let wired = false

    const renderTable = () => window.HakumiComponents.renderComponent("table", {
      params: {
        columns: JSON.stringify([
          { title: "Name", data_index: "name", key: "name" },
          { title: "Age", data_index: "age", key: "age", sorter: true }
        ]),
        data_source: JSON.stringify([
          { key: "1", name: "Noa", age: 24 },
          { key: "2", name: "Leo", age: 35 }
        ])
      },
      target: targetSelector,
      mode: "replace"
    })

    const wire = () => {
      if (wired) return true
      const button = document.getElementById(buttonId)
      if (!button) return false
      if (!window.HakumiComponents?.renderComponent) return false

      button.addEventListener("click", async (event) => {
        event.preventDefault()
        await renderTable()
      })

      wired = true
      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>

<% columns = [
  { title: "Name", data_index: :name, key: :name, width: "160px", fixed: :left },
  { title: "Role", data_index: :role, key: :role, width: "180px", fixed: :left },
  { title: "Country", data_index: :country, key: :country, width: "180px" },
  { title: "Status", data_index: :status, key: :status, width: "160px" },
  { title: "Experience", data_index: :experience, key: :experience, width: "160px" },
  { title: "Last Login", data_index: :last_login, key: :last_login, width: "200px" },
  { title: "Actions", key: :actions, width: "200px", fixed: :right,
    render: ->(_value, row, _index) { "Contact #{row[:name]}" } }
] %>

<% data = [
  { key: "1", name: "Andrea Torres", role: "Product Manager", country: "Spain", status: "Active", experience: "7 years", last_login: "2026-01-02 14:10" },
  { key: "2", name: "Luis Romero", role: "Lead Engineer", country: "Mexico", status: "Active", experience: "10 years", last_login: "2026-01-01 09:20" },
  { key: "3", name: "Marina Costa", role: "UX Director", country: "Portugal", status: "Away", experience: "8 years", last_login: "2025-12-30 18:45" },
  { key: "4", name: "Samuel Ortiz", role: "QA Lead", country: "Colombia", status: "Busy", experience: "6 years", last_login: "2025-12-29 12:15" },
  { key: "5", name: "Lucia Peña", role: "Data Scientist", country: "Argentina", status: "Offline", experience: "5 years", last_login: "2025-12-28 22:03" },
  { key: "6", name: "Hugo Medina", role: "Cloud Architect", country: "Chile", status: "Active", experience: "11 years", last_login: "2025-12-27 07:55" },
  { key: "7", name: "Sara Navas", role: "Design Ops", country: "Spain", status: "Active", experience: "4 years", last_login: "2025-12-26 16:42" },
  { key: "8", name: "Iván Duarte", role: "Mobile Lead", country: "Peru", status: "Away", experience: "9 years", last_login: "2025-12-25 13:05" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  scroll: { x: "1000px", y: "320px" },
  sticky: true,
  title: "Distributed Leadership"
) %>

<% columns = [
  { title: "Product", data_index: :product, key: :product, ellipsis: { show_title: true } },
  { title: "Description", data_index: :description, key: :description,
    ellipsis: { tooltip: { placement: :top_left, title: ->(row, _) { "Notes: #{row[:product]}" } } } },
  { title: "Status", data_index: :status, key: :status, width: "140px" }
] %>

<% data = [
  { key: "1", product: "Hakumi Insight Platform", description: "Unified analytics workspace for product, ops and AI teams.", status: "Active" },
  { key: "2", product: "Hakumi Signal", description: "Event intelligence service orchestrating over 18 providers.", status: "Shipping" },
  { key: "3", product: "Hakumi Atlas", description: "Customer data backbone with governance baked in from day zero.", status: "Planned" }
] %>

<%= render Hakumi::Table::Component.new(
  columns: columns,
  data_source: data,
  scroll: { x: "640px" }
) %>

<% columns = [
  { 
    title: "Name", 
    data_index: :name, 
    key: :name, 
    editable: true,
    width: "30%"
  },
  { 
    title: "Age", 
    data_index: :age, 
    key: :age, 
    editable: { input_type: :number },
    should_cell_update: "preventAgeDecrement",
    width: "20%" 
  },
  { 
    title: "Address", 
    data_index: :address, 
    key: :address,
    width: "50%"
  }
] %>
<% data = [
  { key: "1", name: "Juan Perez", age: 32, address: "Madrid" },
  { key: "2", name: "Maria Lopez", age: 28, address: "Barcelona" },
  { key: "3", name: "Carlos Ruiz", age: 45, address: "Valencia" }
] %>

<div style="margin-bottom: 32px">
  <h3>Cell Editable</h3>
  <%= render Hakumi::Table::Component.new(
    id: "editable-table-cell",
    columns: columns,
    data_source: data,
    title: "Click cells to edit",
    bordered: true,
    editable: { mode: :cell }
  ) %>
</div>

<div style="margin-bottom: 32px">
  <h3>Row Editable</h3>
  <%= render Hakumi::Table::Component.new(
    id: "editable-table-row",
    columns: columns,
    data_source: data,
    title: "Click cells to edit (row mode)",
    bordered: true,
    editable: { mode: :row }
  ) %>
</div>

<script>
  // Register validation function globally before Stimulus connects
  window.HakumiTableShouldCellUpdate = window.HakumiTableShouldCellUpdate || {}
  window.HakumiTableShouldCellUpdate.preventAgeDecrement = ({ value, originalValue }) => {
    const previous = Number(originalValue)
    const next = Number(value)
    if (!Number.isNaN(previous) && !Number.isNaN(next) && next < previous) {
      return "Age cannot decrease."
    }
    return true
  }
</script>

<script>
  (() => {
    const cellTable = document.getElementById("editable-table-cell")
    const rowTable = document.getElementById("editable-table-row")

    if (!cellTable || !rowTable) return

    let wired = false
    const wire = () => {
      if (wired) return true
      
      const cellApi = cellTable.hakumiTable
      const rowApi = rowTable.hakumiTable
      if (!cellApi || !rowApi) return false

      // Move validation hook from global to instance-level
      const hookFn = window.HakumiTableShouldCellUpdate.preventAgeDecrement
      if (hookFn) {
        cellApi.registerShouldCellUpdate("preventAgeDecrement", hookFn)
        rowApi.registerShouldCellUpdate("preventAgeDecrement", hookFn)
      }

      wired = true
      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)

    // Handle prevented updates - user decides how to display feedback
    document.addEventListener("hakumi:table:cell-update-prevented", (event) => {
      const { reason } = event.detail
      if (window.HakumiComponents?.renderComponent) {
        window.HakumiComponents.renderComponent("message", {
          params: { type: "warning", message: reason }
        })
      }
    })

    // Handle successful edits - backend persistence (cell mode)
    document.addEventListener("hakumi:table:edit", (event) => {
      const { rowKey, columnKey, value } = event.detail
      console.log(`[Table Cell] Saved row=${rowKey} col=${columnKey} value="${value}"`)
    })

    // Handle successful row edits - backend persistence (row mode)
    document.addEventListener("hakumi:table:row-edit", (event) => {
      const { rowKey, changes, params } = event.detail
      console.log(`[Table Row] Saved row=${rowKey} with ${changes.length} changes:`, changes)
      console.log(`[Table Row] Rails params:`, params)
      
      // Single API call with Rails-formatted params (ready to use!)
      // fetch(`/api/rows/${rowKey}`, {
      //   method: 'PATCH',
      //   body: JSON.stringify(params),
      //   headers: { 'Content-Type': 'application/json' }
      // })
    })
  })()
</script>

<%= render Hakumi::Table::Component.new(
  columns: [
    { title: "ID", data_index: :id, key: :id, width: "80px", sorter: true },
    { title: "Name", data_index: :name, key: :name, sorter: true },
    { title: "Department", data_index: :department, key: :department, sorter: true },
    { title: "Age", data_index: :age, key: :age, width: "80px", sorter: true },
    { title: "City", data_index: :city, key: :city, sorter: true },
    { title: "Salary", data_index: :salary_formatted, key: :salary, sorter: true, sort_value: :salary }
  ],
  data_source: [],
  bordered: true,
  data_url: "/playground/table_data",
  pagination: { page_size: 10 }
) %>

<%= render Hakumi::Table::Component.new(
  columns: [
    { title: "Name", data_index: :name, key: :name },
    { title: "Age", data_index: :age, key: :age },
    { title: "Address", data_index: :address, key: :address }
  ],
  data_source: [
    { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park" },
    { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
    { key: "3", name: "Joe Black", age: 32, address: "Sydney No. 1 Lake Park" },
    { key: "4", name: "Jane White", age: 28, address: "Tokyo No. 1 Lake Park" }
  ],
  bordered: true,
  row_drag: :handle
) %>

<%= render Hakumi::Table::Component.new(
  columns: [
    { title: "Name", data_index: :name, key: :name, responsive: [:xs, :sm, :md, :lg, :xl, :xxl] },
    { title: "Age", data_index: :age, key: :age, width: "80px", responsive: [:xs, :sm, :md, :lg, :xl, :xxl] },
    { title: "Email", data_index: :email, key: :email, responsive: [:md, :lg, :xl, :xxl] },
    { title: "Phone", data_index: :phone, key: :phone, responsive: [:lg, :xl, :xxl] },
    { title: "Department", data_index: :department, key: :department, responsive: [:xl, :xxl] },
    { title: "Status", data_index: :status, key: :status, width: "100px", responsive: [:xs, :sm, :md, :lg, :xl, :xxl] }
  ],
  data_source: [
    { key: "1", name: "John Brown", age: 32, email: "john@example.com", phone: "555-0101", department: "Engineering", status: "Active" },
    { key: "2", name: "Jane Smith", age: 28, email: "jane@example.com", phone: "555-0102", department: "Design", status: "Active" },
    { key: "3", name: "Bob Wilson", age: 45, email: "bob@example.com", phone: "555-0103", department: "Marketing", status: "Inactive" },
    { key: "4", name: "Alice Lee", age: 36, email: "alice@example.com", phone: "555-0104", department: "Sales", status: "Active" }
  ],
  bordered: true
) %>