LLM-friendly URL

Data Field

Introduction

luzmo-data-field represents a single draggable data column or formula. Use it when you need precise control over which fields appear in your UI, or when you are building a custom drag-and-drop layout.

Users drag this component into luzmo-item-slot-drop targets to configure chart slots. For most cases, luzmo-data-field-panel is the easier starting point -- it renders a full field list with search and dataset switching built in.

Use the <luzmo-data-field> element in your HTML.

Interactive example

Data fields (individual)<luzmo-data-field>
Chart slots (individual)<luzmo-item-slot-drop>
Live bar chart<luzmo-viz-item>

Properties

Use HTML attributes for primitive values in markup, and JS properties for objects, arrays, and programmatic updates.

Property HTML attribute Type Description
data — DatasetDataField The data field to render (column or formula metadata).
disableddisabledboolean Disables dragging.
hideSublevelshide-sublevelsboolean Hides sublevels (datetime levels / hierarchy levels).
hideTypeIconhide-type-iconboolean Hides the data-type icon.
languagelanguagestring UI language for labels. Default: en .
sizesize's' | 'm' | 'l' | 'xl' Size variant.
variantvariant'highlight' | 'normal' Visual variant. Default: normal .

Events

Name Payload type Description
luzmo-data-field-drag-startedCustomEvent<DataFieldDragStartedEventDetail> Fired when dragging starts. Detail shape: { data: DatasetDataField } .
luzmo-data-field-droppedCustomEvent<DataFieldDroppedEventDetail> Fired when the field is dropped. Detail shape: { data: DatasetDataField } .

Event detail types are exported from @luzmo/analytics-components-kit/types .

Types

Import the component entrypoint for the element registration and its component-owned type. Shared types come from the public types barrel.

ts
import '@luzmo/analytics-components-kit/data-field';

import type { DatasetDataFieldWithSublevel } from '@luzmo/analytics-components-kit/data-field';
import type {
  AdHocFormulaFieldData,
  ColumnFieldData,
  DataFieldDragStartedEventDetail,
  DataFieldDroppedEventDetail,
  DatasetDataField,
  FormulaFieldData
} from '@luzmo/analytics-components-kit/types';
Type Import path Description
DatasetDataField@luzmo/analytics-components-kit/types Main data property shape and the payload behind drag/drop events. Union of ColumnFieldData | FormulaFieldData | AdHocFormulaFieldData .
DatasetDataFieldWithSublevel@luzmo/analytics-components-kit/data-field Extends DatasetDataField with an optional sublevelLabel for generated datetime and hierarchy sublevels.
ColumnFieldData@luzmo/analytics-components-kit/types Field data shape for regular dataset columns.
FormulaFieldData@luzmo/analytics-components-kit/types Field data shape for saved formulas.
AdHocFormulaFieldData@luzmo/analytics-components-kit/types Field data shape for ad-hoc (unsaved) formulas.
DataFieldDragStartedEventDetail@luzmo/analytics-components-kit/types Event detail for luzmo-data-field-drag-started . Shape: { data: DatasetDataField } .
DataFieldDroppedEventDetail@luzmo/analytics-components-kit/types Event detail for luzmo-data-field-dropped . Shape: { data: DatasetDataField } .

CSS Variables

All CSS variables in this list can be set on luzmo-data-field { ... } .

Variable Description
--luzmo-data-field-sublevels-gap Gap between rendered sublevels.
--luzmo-data-field-sublevels-margin-vertical Vertical margin around the sublevels container.

Code examples

index.html
Web component
Angular
React
React Native
Vue
<luzmo-data-field
  id="orderDateField"
  language="en"
  size="m"
  variant="highlight"
></luzmo-data-field>

<script type="module">
  import '@luzmo/analytics-components-kit/data-field';

  const orderDateField = document.getElementById('orderDateField');

  orderDateField.data = {
    datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
    columnId: '1f8b6c90-2d4e-4a1b-9c7d-5e6f7a8b9c01',
    type: 'datetime',
    name: { en: 'Order date' },
    description: { en: 'Date when the order was placed' },
    lowestLevel: 5
  };

  orderDateField.addEventListener('luzmo-data-field-drag-started', (event) => {
    console.log('drag started', event.detail.data);
  });
</script>
Did this page help you?
Yes No