CataUiTableAG

A data table component built on AG Grid that provides advanced features for displaying and managing large datasets.

Fallthrough Attributes

Important: This component supports Vue's fallthrough attributes. Fallthrough attributes are attributes or event listeners passed to a component that are not explicitly declared as props or emits. These attributes are automatically forwarded to the underlying AG Grid component, allowing you to use any AG Grid configuration options directly.

This means you can pass any AG Grid prop (like :columnDefs, :autoSizeStrategy, :rowSelection, etc.) directly to the component without them being explicitly defined as props.

For more information about fallthrough attributes, see the Vue.js documentation.

Example

<CataUiTableAG 
  style="height: 400px; width: 100%;"
  :rows="tableData"
  :columnDefs="columnDefs"
  :autoSizeStrategy="{ type: 'fitGridWidth', defaultMinWidth: 175 }"
  :rowSelection="{ mode: 'multiRow' }"
  v-model:selectedRows="selectedRows"
  @selectedRowsChanged="handleRowSelection" 
  @displayingLastContent="loadMoreData" />

The component automatically generates columns based on the data structure:

const tableData = [
  { 
    id: 1, 
    name: 'John Doe', 
    department: 'Engineering', 
    email: 'john@company.com', 
    status: 'Active' 
  },
  { 
    id: 2, 
    name: 'Jane Smith', 
    department: 'Design', 
    email: 'jane@company.com', 
    status: 'Active' 
  }
];

For advanced column configuration, you can use AG Grid's configuration options:

const columnDefs = [
  {
    field: 'id',
    headerName: 'ID',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    width: 80
  },
  {
    field: 'name',
    headerName: 'Name',
    flex: 2
  },
  {
    field: 'department',
    headerName: 'Department'
  },
  {
    field: 'email',
    headerName: 'Email',
    flex: 2
  }
];

Props

Events

External Documentation

For comprehensive configuration options and advanced features, refer to the AG Grid Vue documentation.

Data Structure

Row Data

Each row object should have an id property for proper selection handling:

const rows = [
  { 
    id: 1, 
    name: 'John Doe', 
    email: 'john@example.com' 
  },
  { 
    id: 2, 
    name: 'Jane Smith', 
    email: 'jane@example.com' 
  }
];

Column Definitions

Use AG Grid's column definition format for configuring columns:

const columnDefs = [
  {
    field: 'name',
    headerName: 'Name',
    sortable: true,
    filter: true,
    resizable: true
  }
];

For more details on configuration options, see the AG Grid Column Properties documentation.