{
  label: "Id",
  jsonPath: "id", 
  link: true, // Creates clickable links
  buttonProps: {
    size: "medium",
    icon: "Edit",
    linkTo: "/edit-page" // Optional: direct navigation
  }
}

// Row selection configuration
selectionProps: {
  showCheckBox: true,
  showSelectedState: true,
  selectableRowsNoSelectAll: false,
  showSelectedStatePosition: "top" // or "bottom"
}

// Action buttons for selected rows
actionProps: {
  actions: [
    { label: "Edit", variation: "secondary", icon: "Edit" },
    { label: "Delete", variation: "primary", icon: "Delete" }
  ]
}

footerProps: {
  showFooter: true,
  allowedRolesForFooter: ["ADMIN"],
  actionFields: [
    { 
      label: "Previous", 
      icon: "ArrowBack", 
      variation: "secondary",
      allowedRoles: ["USER"] 
    },
    { 
      label: "Next", 
      icon: "ArrowForward", 
      variation: "primary",
      allowedRoles: ["ADMIN"] 
    }
  ],
  setactionFieldsToRight: true
}

const ExpandedComponent = ({ data }) => (
  <pre>{JSON.stringify(data, null, 2)}</pre>
);

expandableProps: {
  expandableRows: true,
  expandableRowsComponent: ExpandedComponent
}

// Inline editable column
{
  label: "Name",
  jsonPath: "data.name",
  editable: true,
  editableFieldConfig: {
    type: "text",
    validation: { minlength: 2 },
    populators: { name: "row.name" }
  }
}

// Additional popup fields
additionalPopupColumns: [
  {
    label: "Description",
    jsonPath: "data.description", 
    editable: true,
    editableFieldConfig: {
      type: "textarea",
      populators: { name: "row.description" }
    }
  }
]

// Handle link column clicks
linkColumnHandler: (row) => {
  const url = `/${window.contextPath}/employee/view?id=${row?.id}`;
  window.location.href = url;
},

// Handle row selections
selectionHandler: (event) => {
  const { allSelected, selectedCount, selectedRows } = event;
  console.log('Selected:', selectedCount, 'rows');
},

// Handle action button clicks
actionSelectHandler: (index, label, selectedRows) => {
  if (label === "Delete") {
    // Handle delete action
  }
},

// Handle footer action clicks  
footerActionHandler: (index, event) => {
  console.log('Footer action:', index, event);
}

// New field types added
"text", "date", "time", "geolocation", "password", 
"search", "number", "numeric", "textarea", "radio", 
"dropdown", "select", "radioordropdown", "toggle", 
"checkbox", "multiselectdropdown", "mobileNumber",
"component", "custom", "amount", "locationdropdown", 
"apidropdown", "dateRange"

{
  type: "boundary",
  label: "Administrative Area",
  populators: {
    name: "boundary",
    levelConfig: {
      lowestLevel: "VILLAGE",
      highestLevel: "STATE",
      isSingleSelect: ["STATE"] // Single selection for state level
    },
    hierarchyType: "ADMIN_BOUNDARY",
    layoutConfig: {
      isDropdownLayoutHorizontal: true,
      isLabelFieldLayoutHorizontal: false  
    },
    preSelected: ["STATE_001", "DISTRICT_001"], // Pre-fill values
    frozenData: [ // Locked selections
      { code: "STATE_001", name: "State 1" }
    ]
  }
}

// Import individual components
import { Button, TextInput, FormComposerV2, InboxSearchComposer } from "@egovernments/digit-ui-components";

// Import SVG icons
import { SVG } from "@egovernments/digit-ui-components";

// Usage
<Button variant="primary">Click Me</Button>
<SVG.Accessibility />

import { FormComposerV2 } from "@egovernments/digit-ui-components";

const formConfig = {
  head: "User Details",
  body: [
    {
      type: "text",
      label: "Name",
      isMandatory: true,
      populators: { name: "userName" }
    },
    {
      type: "boundary", // New boundary dropdown
      label: "Location",
      populators: {
        name: "location",
        hierarchyType: "ADMIN",
        levelConfig: {
          lowestLevel: "LOCALITY",
          highestLevel: "STATE"
        }
      }
    }
  ]
};

<FormComposerV2 
  config={[formConfig]} 
  onSubmit={handleSubmit}
  defaultValues={defaultData}
/>

import { InboxSearchComposer } from "@egovernments/digit-ui-components";

const searchConfig = {
  headerLabel: "Search Applications", // Updated from 'label'
  type: "search",
  actions: { // Updated structure
    actionLabel: "Create New",
    actionRoles: ["ADMIN"],
    actionLink: "/create"
  },
  // ... rest of config
};

<div className="digit-inbox-search-wrapper">
  <InboxSearchComposer configs={searchConfig} />
</div>

// ❌ Old Usage (pre v0.2.0)
<Toast info={true} label={"Info Toast"} />
<Toast warning="warning" label={"Warning Toast"}/>

// ✅ New Usage (v0.2.0+)
<Toast type="info" label={"Info Toast"} />
<Toast type="warning" label={"Warning Toast"} />
<Toast type="success" label={"Success Toast"} />

// ❌ Old Config (v0.2.0)
const oldConfig = {
  label: "Search Applications",
  actionLabel: "Create",
  actionRoles: ["ADMIN"]
};

// ✅ New Config (v0.2.1)
const newConfig = {
  headerLabel: "Search Applications", // Changed from 'label'
  actions: { // Grouped under 'actions'
    actionLabel: "Create",
    actionRoles: ["ADMIN"],
    actionLink: "/create"
  }
};