LLM-friendly URL

Data Field Panel

Introduction

luzmo-data-field-panel displays a browsable list of columns and formulas from one or more datasets, complete with search and optional dataset switching. Use it when you want a ready-made field list instead of rendering individual luzmo-data-field elements yourself.

This component is typically paired with luzmo-item-slot-drop-panel -- users drag fields from the panel into slot targets to configure a chart. For a dropdown-based alternative that doesn't require drag-and-drop, see luzmo-item-slot-picker-panel .

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

Interactive example

Dataset fields (panel)<luzmo-data-field-panel>

Chart slots (panel)<luzmo-item-slot-drop-panel>

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
`apiUrl`	`api-url`	`string`	Luzmo API URL used for fetching datasets/fields. Default: `https://api.luzmo.com` .
`authKey`	`auth-key`	`string \| undefined`	Auth key used by the data broker.
`authToken`	`auth-token`	`string \| undefined`	Auth token used by the data broker.
`dataFieldVariant`	`data-field-variant`	`'highlight' \| 'normal'`	Variant passed to child data fields. Default: `highlight` .
`datasetIds`	—	`string[]`	Dataset IDs to load. If provided (and `datasetsDataFields` is empty), names are fetched for the picker and fields are lazy-loaded per dataset.
`datasetPicker`	`dataset-picker`	`boolean`	Enables the dataset picker UI (shown only when relevant). Default: `false` .
`datasetPickerPlaceholder`	`dataset-picker-placeholder`	`string \| undefined`	Placeholder shown in the dataset picker.
`datasetsDataFields`	—	`DatasetDataFields[]`	Direct data for datasets and fields. Takes precedence over `datasetIds` and API listing.
`disabled`	`disabled`	`boolean`	Disables panel interactions. Default: `false` .
`hideSublevels`	`hide-sublevels`	`boolean`	Hides datetime/hierarchy sublevels on child data fields. Default: `false` .
`hideTypeIcon`	`hide-type-icon`	`boolean`	Hides data-type icons on child data fields. Default: `false` .
`language`	`language`	`string`	UI language. Default: `en` .
`pending`	`pending`	`boolean`	Forces a pending state UI. Default: `false` .
`search`	`search`	`'on' \| 'off' \| 'auto'`	Search visibility. Default: `auto` .
`searchPlaceholder`	`search-placeholder`	`string \| undefined`	Placeholder shown in the search input.
`searchQuiet`	`search-quiet`	`boolean`	Uses quiet styling for the search input. Default: `false` .
`searchThreshold`	`search-threshold`	`number`	Threshold used when `search="auto"` . Default: `20` .
`selectedDatasetId`	`selected-dataset-id`	`string \| undefined`	Currently selected dataset ID. Defaults to the first available dataset.
`size`	`size`	`'s' \| 'm' \| 'l' \| 'xl'`	Size variant.

Events

Name	Payload type	Description
`luzmo-data-field-drag-started`	`CustomEvent<DataFieldDragStartedEventDetail>`	Re-emitted from child data fields when dragging starts. Detail shape: `{ data: DatasetDataField }` .
`luzmo-data-field-dropped`	`CustomEvent<DataFieldDroppedEventDetail>`	Re-emitted from child data fields when dropped. Detail shape: `{ data: DatasetDataField }` .
`luzmo-dataset-changed`	`CustomEvent<DatasetChangedEventDetail>`	Fired when the selected dataset changes. Detail shape: `{ datasetId: string }` .

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

Types

Import the component entrypoint for the element registration. Component-owned types and shared types are both available from the entrypoint re-exports; shared types can also be imported from the public types barrel.

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

import type {
  DataFieldDragStartedEventDetail,
  DataFieldDroppedEventDetail,
  DatasetChangedEventDetail,
  DatasetDataFields
} from '@luzmo/analytics-components-kit/data-field-panel';
import type { DatasetDataField, DatasetWithDataFields } from '@luzmo/analytics-components-kit/types';

Type	Import path	Description
`DatasetDataFields`	`@luzmo/analytics-components-kit/data-field-panel`	Input shape for the `datasetsDataFields` property. Contains a dataset id, name, and its columns/formulas arrays.
`DatasetChangedEventDetail`	`@luzmo/analytics-components-kit/data-field-panel`	Event detail for `luzmo-dataset-changed` . Shape: `{ datasetId: string }` .
`DataFieldDragStartedEventDetail`	`@luzmo/analytics-components-kit/data-field-panel`	Event detail for `luzmo-data-field-drag-started` . Shape: `{ data: DatasetDataField }` .
`DataFieldDroppedEventDetail`	`@luzmo/analytics-components-kit/data-field-panel`	Event detail for `luzmo-data-field-dropped` . Shape: `{ data: DatasetDataField }` .
`DatasetDataField`	`@luzmo/analytics-components-kit/types`	Shape of a single data field (column or formula metadata) contained inside drag/drop event payloads.
`DatasetWithDataFields`	`@luzmo/analytics-components-kit/types`	Return type of `loadDataFieldsForDatasets(...)` . Compatible with the panel's `datasetsDataFields` -based input mode.

CSS Variables

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

Variable	Description
`--luzmo-data-field-panel-data-fields-gap`	Gap between data fields in the list.
`--luzmo-data-field-panel-dataset-picker-padding-block-end`	Padding below the dataset picker content.
`--luzmo-data-field-panel-dataset-picker-margin-block-end`	Margin below the dataset picker section.
`--luzmo-data-field-panel-dataset-picker-divider-color`	Divider color below the dataset picker.
`--luzmo-data-field-panel-search-margin-block-end`	Margin below the search input.
`--luzmo-data-field-panel-search-edge-to-visual`	Edge-to-icon spacing for the search input.
`--luzmo-data-field-panel-search-text-to-icon`	Text-to-icon spacing for the search input.
`--luzmo-data-field-panel-search-quiet-block-size`	Height of the search input in quiet mode.
`--luzmo-data-field-panel-scrollbar-width`	Scrollbar width for the list.
`--luzmo-data-field-panel-scrollbar-track-background`	Scrollbar track background.
`--luzmo-data-field-panel-scrollbar-thumb-background`	Scrollbar thumb background.
`--luzmo-data-field-panel-scrollbar-thumb-hover-background`	Scrollbar thumb background on hover.

Code examples

index.html

Web component

Angular

React

React Native

Vue

<luzmo-data-field-panel
  id="fieldsPanel"
  language="en"
  size="m"
  dataset-picker
  search="auto"
></luzmo-data-field-panel>

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

  const datasets = [
    {
      id: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
      name: { en: 'Sales' },
      columns: [
        { id: '2a7c5e41-6d8f-4b2a-93c1-7e5d4f6a8b12', name: { en: 'Revenue' }, type: 'numeric', format: '.2f' },
        { id: '1f8b6c90-2d4e-4a1b-9c7d-5e6f7a8b9c01', name: { en: 'Order date' }, type: 'datetime', lowestLevel: 5 }
      ],
      formulas: []
    },
    {
      id: '91c4f2a7-6b56-4b34-8f79-2d4d5cbe7a22',
      name: { en: 'Returns' },
      columns: [
        { id: '4c9e7a63-8f1b-4d4c-b5e3-9a7f6b8c0d34', name: { en: 'Returns' }, type: 'numeric' },
        { id: '5dae8b74-9a2c-4e5d-86f4-ab8c7d9e1f45', name: { en: 'Return date' }, type: 'datetime', lowestLevel: 5 }
      ],
      formulas: []
    }
  ];

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

  fieldsPanel.datasetsDataFields = datasets;
  fieldsPanel.selectedDatasetId = '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11';

  fieldsPanel.addEventListener('luzmo-dataset-changed', (event) => {
    console.log('dataset changed', event.detail.datasetId);
  });

  fieldsPanel.addEventListener('luzmo-data-field-dropped', (event) => {
    console.log('field dropped', event.detail);
  });
</script>

Did this page help you?

Yes