Table Data Hds

<sl-table-data-hds id="hds-data-table"></sl-table-data-hds>
<script>
  const dataTable = document.getElementById('hds-data-table');

  dataTable.chartTitle = "Special DataTable Example"
  dataTable.rowHover = true;
  dataTable.striped = true;
  // NOTE: the 'status' keyword transforms the values into labels
  dataTable.columns = ['name', 'age', 'city', 'editable input', 'status'];
  dataTable.editableColumns = ['city', 'editable input']
  dataTable.data = [
    { id: 1, rows: [ 'Alice', 12, 'New York', 'A value that needs to be edited', 'Active' ] },
    { id: 2, rows: [ 'Jim', 38, 'Victoria', 'A value that needs to be edited', 'Inactive'] },
    { id: 3, rows: [ 'Bob', 50, 'Western AUS', 'A value that needs to be edited', 'Pending'] },
    { id: 4, rows: [ 'Peter', 29, 'TN', 'A value that needs to be edited', 'Active'] },
    { id: 5, rows: [ 'Joe', 30, 'NSW', 'A value that needs to be edited', 'Active'] },
  ];

  // Example of capturing data when editing a cell
  document.getElementById('hds-data-table').addEventListener('cell-edit', (event) => {
    const { id, rowIndex, colIndex, updatedValue } = event.detail;
    console.log(`Cell updated record id: ${id} at row ${rowIndex}, column ${colIndex}: ${updatedValue}`);
    // Handle the update, e.g., save to a server or update local state
  });

  // Example of capturing selected row data
  document.getElementById('hds-data-table').addEventListener('selection-change', (event) => {
    const { selectedRowIds } = event.detail;
    console.log(`Id's of rows selected: ${selectedRowIds}`);
    // Handle the update, e.g., save to a server or update local state
  });

  // Example of capturing action click on row eye
  document.getElementById('hds-data-table').addEventListener('row-action', (event) => {
    const { id } = event.detail;
    console.log(`Id of row: ${id}`);
    // Handle the update, e.g., save to a server or update local state
  });
</script>