const props = defineProps({
      /**
       * Used to set the 'id' attribute on the rendered content, and used as the base to generate any additional
       * element IDs as needed
       */
      id: { type: String, default: () => '' },

      /**
       * Array of items to display, or an items provider function reference. Refer to the docs for details
       */
      items: { type: [Array, Function], default: () => [] },

      /**
       * Array of field names or array of field definition objects
       */
      fields: { type: Array, default: () => null },

      /**
       * Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition
       * support, and also speeds up table rendering
       */
      primaryKey: { type: String, default: () => 'id' },

      /**
       * Applies striping to the tbody rows
       */
      striped: { type: Boolean, default: false },

      /**
       * Adds borders to all the cells and headers
       */
      bordered: { type: Boolean, default: false },

      /**
       * Removes all borders from cells
       */
      borderless: { type: Boolean, default: false },

      /**
       * Adds an outline border to the table element
       */
      outlined: { type: Boolean, default: false },

      /**
       * Enables hover styling on rows
       */
      hover: { type: Boolean, default: false },

      /**
       * Renders the table with appropriate cell padding and font-size
       */
      size: { type: String, default: '', validator: expectedValues('', 'sm', 'lg') },

      /**
       * Renders the table with smaller cell padding and smaller text size. Same as size="sm"
       */
      small: { type: Boolean, default: false },

      /**
       * Renders the table with larger cell padding and larger text size. Same as size="lg"
       */
      large: { type: Boolean, default: false },

      /** when it's nested inside a card that has 'no-body' prop set to true */
      flush: { type: Boolean, default: false },

      /**
       * Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS
       * height (including units)
       */
      stickyHeaders: { type: [Boolean, String], default: false },

      /**
       * The value that the sticky headers should begin sticking (i.e. top-0 or top-[20px] etc...)
       */
      stickyTop: { type: String, default: 'top-0' },

      /**
       * The value that the sticky footer should begin sticking (i.e. bottom-0 or bottom-[20px] etc...)
       */
      stickyBottom: { type: String, default: 'bottom-0' },

      /**
       * Disable's the collapsing of table borders. Useful when table has sticky headers or columns
       */
      noBorderCollapse: { type: Boolean, default: false },

      /**
       * CSS class (or classes) to apply to the table element
       */
      tableClass: { type: [String, Array, Object], default: '' },

      /**
       * Apply a color variant to the thead element ('primary' or 'secondary'. May take precedence over head-row-variant
       */
      headVariant: { type: String, default: '', validator: expectedValues('', 'primary', 'secondary') },

      /**
       * Apply a color variant to the tr element in the thead
       */
      headRowVariant: { type: String, default: '', validator: expectedValues('', 'primary', 'secondary') },

      /**
       * CSS class (or classes) to apply to the thead element
       */
      theadClass: { type: [String, Array, Object], default: () => '' },

      /**
       * CSS class (or classes) to apply to the tr element in the thead
       */
      theadTrClass: { type: [String, Array, Object], default: () => '' },

      /**
       * Enable to the footer of the table, and clone the header content by default
       */
      footClone: { type: Boolean, default: false },

      /**
       * Apply a color variant to the tfoot element ('primary' or 'secondary'). Falls back to foot-variant.
       * May take precedence over foot-row-variant
       */
      footVariant: { type: String, default: () => '', validator: expectedValues('', 'primary', 'secondary') },

      /**
       * Apply a color variant to the tr element in the tfoot. Falls back to head-row-variant
       */
      footRowVariant: { type: String, default: () => '', validator: expectedValues('', 'primary', 'secondary') },

      /**
       * CSS class (or classes) to apply to the tfoot element
       */
      tfootClass: { type: [String, Array, Object], default: () => '' },

      /**
       * CSS class (or classes) to apply to the tr element in the tfoot
       */
      tfootTrClass: { type: [String, Array, Object], default: () => '' },

      /**
       * CSS class (or classes) to apply to the tr element in the tbody. Can be a function that returns a class
       * (see docs for details)
       */
      tbodyTrClass: { type: [String, Array, Object, Function], default: () => '' },

      /**
       * CSS class (or classes) to apply to the tbody element
       */
      tbodyClass: { type: [String, Array, Object], default: () => '' },

      /**
       * Criteria for filtering. Internal filtering supports only string or RegExpr criteria.
       */
      filter: { type: [String, Object], default: () => '' },

      /**
       * Field name that is currently being sorted. Set to null to clear sorting. Syncable with the .sync prop modifier
       */
      sortBy: { type: Array, default: () => [''] },

      /**
       * When sorting, null and undefined values will be sorted first (or last, depending on 'sort-desc'). Set
       * this prop to sort null values last. Only applicable to internal sorting
       */
      sortNullFirst: { type: Boolean, default: () => false },
      //
      // /**
      //  * When the build in formatter is used, setting this prop will disable the sorting ability in the footer
      //  */
      // noFooterSorting: { type: Boolean, default: () => false },

      /**
       * Number of rows to show per page. Set to 0 to disable pagination
       */
      perPage: { type: [Number, String], default: () => 0 },

      /**
       * The current page number to display when the table is paginated. Starting from 1 and up
       */
      currentPage: { type: [Number, String], default: () => 1 },

      /**
       * Text string to place in the caption element
       */
      caption: { type: String, default: () => '' },

      /**
       * When enabled, and there are no item records to show, shows a message that there are no rows to show
       */
      showEmpty: { type: Boolean, default: () => false },

      /**
       * Text string to show when the table has no items to show
       */
      emptyText: { type: String, default: () => 'There are no records to show' },

      /**
       * Text string to show when the table has no items to show due to filtering
       */
      emptyFilteredText: { type: String, default: () => 'There are no records matching your filter values' },

      /**
       * When set, forces the table into the busy state.Automatically set when an items provider function is
       * being called
       */
      busy: { type: Boolean, default: () => false },