vueless/ui.data-table/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: "relative w-full overflow-auto",
  headerCounterBase: "mr-1.5 pr-1.5 font-medium text-medium",
  stickyHeader: {
    base: "fixed top-0 flex items-center z-30 overflow-hidden border border-solid rounded-none",
    variants: {
      stickedHeader: {
        false: "absolute",
      },
      actionsHeader: {
        true: "rounded-t-medium border-muted bg-default pb-px",
      },
    },
    compoundVariants: [
      { stickedHeader: true, actionsHeader: true, class: "rounded-none" },
      { stickedHeader: true, actionsHeader: false, class: "border-muted bg-default" },
    ],
  },
  stickyHeaderCell: "{>headerCellBase} flex-none whitespace-nowrap",
  stickyHeaderCheckbox: "{UCheckbox}",
  stickyHeaderCounter: {
    base: "{>headerCounterBase} absolute top-4 left-11 bg-linear-to-r from-(--vl-bg) from-80%",
    variants: {
      compact: {
        true: "top-3",
      },
    },
  },
  stickyHeaderLoader: "{ULoaderProgress} absolute top-auto bottom-0",
  headerActionsCheckbox: "{UCheckbox}",
  headerActionsCounter: "{>headerCounterBase} -ml-1.5",
  tableWrapper: {
    base: "border border-solid border-muted rounded-medium bg-default overflow-x-auto ",
    variants: {
      virtualScroll: {
        true: "h-150 overflow-y-auto",
      },
    },
  },
  table: {
    base: "min-w-full border-none text-medium w-auto table-auto border-separate border-spacing-0",
    variants: {
      virtualScroll: {
        true: "table-layout-fixed w-full",
      },
    },
  },
  header: {
    base: "[&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",
  },
  headerRow: "",
  beforeHeaderRow: "border border-solid border-muted",
  beforeHeaderCell: "{>headerCellBase}",
  headerCellBase: {
    base: "border-b border-muted p-4 text-medium font-normal text-lifted text-left text-nowrap",
    variants: {
      compact: {
        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
      },
      virtualScroll: {
        true: "sticky top-0 z-10 bg-default",
      },
    },
  },
  headerCellSticky: "sticky z-20 bg-default",
  headerCellStickyLeft: "{>headerCellSticky}",
  headerCellStickyRight: "{>headerCellSticky}",
  headerCellCheckbox: "{>headerCellBase} w-10 pr-2",
  headerCheckbox: "{UCheckbox}",
  headerCounter: "{>stickyHeaderCounter} ml-px",
  headerLoader: "{ULoaderProgress} absolute top-auto bottom-0",
  body: "group/body divide-none",
  bodyRow: "bg-default hover:bg-muted",
  bodyRowChecked: "bg-lifted transition",
  beforeBodyRow: "p-0!",
  beforeBodyRowChecked: "{>bodyRowChecked} p-0!",
  beforeBodyRowCell: "{>bodyCellBase} py-1",
  afterBodyRow: "p-0!",
  bodyRowDateDivider: "first:hidden",
  bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
  bodyCellBase: {
    base: "p-4 truncate align-top",
    variants: {
      compact: {
        true: "px-4 py-3 last:px-4 last:py-3 first:px-4! first:py-3",
      },
    },
  },
  bodyCellSticky: "sticky z-10 bg-inherit",
  bodyCellStickyLeft: "{>bodyCellSticky}",
  bodyCellStickyRight: "{>bodyCellSticky}",
  bodyCellContent: "text-ellipsis overflow-hidden",
  bodyCellCheckbox: "{>bodyCellBase} pr-2",
  bodyCellDateDivider: "",
  bodyCellNested: "mr-2 flex items-center gap-2",
  bodyCellNestedIconWrapper: "bg-primary/15 rounded-xs",
  bodyCellNestedExpandIcon: "{UIcon}",
  bodyCellNestedCollapseIcon: "{UIcon}",
  bodyCheckbox: "{UCheckbox}",
  bodyCellSearchMatch: "bg-warning/10",
  bodyCellSearchMatchActive: "bg-warning/15",
  bodyCellSearchMatchText: "bg-warning/50 rounded-xs",
  bodyCellSearchMatchTextActive: "bg-warning rounded-xs",
  bodyDateDivider: {
    base: "{UDivider} py-2",
    label: "py-0 leading-none",
  },
  bodySelectedDateDivider: {
    base: "{>bodyDateDivider}",
    label: "bg-lifted! transition",
  },
  bodyEmptyState: "{UEmpty} my-8",
  bodyEmptyStateCell: "",
  footer: {
    base: "group/footer border-t border-solid border-muted",
    variants: {
      stickedFooter: {
        true: "relative group/footer-fixed",
      },
    },
  },
  footerRow: {
    base: "[&_td]:py-4",
    variants: {
      compact: {
        true: "[&_td]:px-4 [&_td]:py-3",
      },
    },
  },
  stickyFooterRow: `
    fixed bottom-0 -ml-px border border-solid border-muted bg-default
    collapse group-[*]/footer-fixed:[visibility:inherit]
  `,
  i18n: {
    noData: "There is no data in the table.",
    /* These are used for a11y. */
    checkbox: "Checkbox",
  },
  defaults: {
    emptyCellLabel: "—",
    rowHeight: 40,
    bufferSize: 10,
    virtualScroll: false,
    compact: false,
    selectable: false,
    dateDivider: false,
    stickyHeader: false,
    stickyFooter: false,
    loading: false,
    textEllipsis: false,
    search: "",
    searchMatch: -1,
    /* icons */
    expandIcon: "add",
    collapseIcon: "remove",
  },
};