Data Table

interface Q2DataTableHeader {
  title: string;
  
  // Will be autogenerated from the title if not provided
  // The key is used to grab the data from the row data
  key?: string;   

  // 'auto' to use built-in sorting for this column
  // 'manual' to implement your own sorting for this column
  sortable?: 'auto' | 'manual';
  
  // Indicates in what direction the data is sorted
  sorted?: 'ASC' | 'DESC';

  // Limits the number of rows that are displayed in a cell
  // Content will be truncated if it exceeds the limit
  lineClamp?: number;
  
 
  // Defines alignment of the content within each cell in this column
  // Defaults to 'center'
  align?: 'start' | 'center' | 'end';
  verticalAlign?: 'top' | 'bottom';
  ariaLabel?: string;

  // Defines the width of the column
  width?: string;

  // Defines the background of the column
  backgroundColor?: string;

  // Defines the content type for every cell in this column for styling puposes
  type?: 'text' | 'number' | 'icon' | 'badge' | 'boolean' | 'code';

  // When type = 'badge'
  badgeStatus?: 'info' | 'alert' | 'warning' | 'success';
  badgeTheme?: 'primary' | 'secondary' | 'tertiary';
}

interface Q2DataTableRow {
  id: string | number;
  selected?: boolean;
  expanded?: boolean;
  disabled?: boolean;
  cells: Record<string, string | number | Q2DataTableCell>
}

interface Q2DataTableCell {
  value: string | number;
  
  // Defines alignment of the content within this cell
  // Takes priority over the column's `align` property when provided
  // Defaults to 'center'
  align?: 'start' | 'center' | 'end';
  verticalAlign?: 'top' | 'bottom';
  ariaLabel?: string;


  // Defines the content type for this cell for styling purposes
  // Takes priority over the column's `type` property when provided
  type?: 'text' | 'number' | 'icon' | 'badge' | 'boolean' | 'code';

  // Limits the number of rows that are displayed in a cell
  // Content will be truncated if it exceeds the limit
  lineClamp?: number;

  // When type = 'badge'
  badgeStatus?: 'info' | 'alert' | 'warning' | 'success';
  badgeTheme?: 'primary' | 'secondary' | 'tertiary';
}

const headerData = [
  {
    title: 'Day of Week',
    key: 'day',
    backgroundColor: 'var(--t-gray-14)',
  },
  { title: 'Sales', key: 'sales', align: 'center' },
  { title: 'Revenue', key: 'revenue', align: 'center', sortable: true },
];

const rowData = [
  {
    id: 1,
    cells: {
      day: 'Monday',
      sales: 93,
      revenue: '$4,650',
    },
  },
  {
    id: 2,
    cells: {
      day: 'Tuesday',
      sales: 127,
      revenue: '$6,350',
    },
  },
  {
    id: 3,
    cells: {
      day: 'Wednesday',
      sales: 121,
      revenue: '$6,050',
    },
  },
  {
    id: 4,
    cells: {
      day: 'Thursday',
      sales: 140,
      revenue: '$7,000',
    },
  },
  {
    id: 5,
    cells: {
      day: 'Friday',
      sales: 83,
      revenue: '$4,150',
    },
  },
];

const salesTable = document.querySelector('q2-data-table');
salesTable.headers = headerData;
salesTable.rows = rowData;

const dataTableElement = document.querySelector("q2-data-table")

function sortTransactions(event) {
  // Calling preventDefault() will tell the Data Table
  // NOT to perform the default sort functionality
  event.preventDefault();
  
  const {
    direction,
    header: { key },
  } = event.detail;

  dataTableElement.rows = [
    ...allTransactions.sort((a, b) => {
      if (direction === 'ASC') return a.cells[key] > b.cells[key] ? 1 : -1;
      else return a.cells[key] < b.cells[key] ? 1 : -1;
    }),
  ]);

  // You'll also want to update the headers to reflect which
  // column was sorted and it's direction
  dataTableElement.headers = allHeaders.map(header => (
    { ...header, sorted: header.key === key ? direction : undefined }))
  );
}

tableElement.current?.addEventListener('sort', sortTransactions);