DataTableV2
The DataTableV2
is a component for building tables which organize information
into rows and columns.
Import
import { DataTableV2 } from '@dynatrace/strato-components-preview/tables';
Use cases
Text alignment
By default, if no column type is set, text within a cell is left-aligned and
vertically centered. To explicitly control the text alignment for a column, use
the alignment
property in the column definition.
Define header groups
It is possible to define header groups by providing a nested array of columns
via the columns
property in the column definition. Currently, a header group
can only contain columns and not another nested header group.
Define column types
You can assign a predefined type to every column. Values in those columns will
be rendered and sorted according to each type. Available types are text
,
date
, bit
, number
, log-content
, sparkline
, meterbar
, markdown
and
gantt
.
By default, columns of type text
will automatically detect links and render
them as such. If you want to disable this feature, set the detectLinks
prop in
the column config
to false
. In case you are using a custom cell renderer, a
detectLinks
function is available for you to apply.
Font style
The DataTableV2
allows for the customization of font styles across the entire
table or within individual columns. This can be achieved by configuring it in
the table variant options or the column definition.
Provide sub-rows
The DataTableV2
component offers the capability to include sub-rows.
-
Enable sub-rows - To activate this functionality, the
subRows
prop must be defined. This prop accepts either a boolean value, which activates the default sub-row view, or an object configuration. When utilizing an object for thesubRows
property, you can designate a specificsubRowColumnId
oraccessor
to position the sub-row toggle. In the absence of this specification, the toggle will be displayed by default in the first visible column, as determined by the column's property. -
Provide sub-rows data - Simply define the respective sub-row data by adding the
subRows
property to the parent row's data definition. The specified sub-rows must have the same data structure as the parent rows and can be nested over multiple levels.
Use the defaultOpenSubRows
prop to specify sub-rows that are already open upon
initial rendering. The onOpenSubRowsChange
handler allows you to react to
changes in the currently open sub-rows.
The defaultOpenSubrows
/openSubRows
expects the id of the row (unless
otherwise specified, this is the array index of the data) along with a boolean
whether or not it's opened. Nested subrows are separated with a dot by default,
so '0.0' would be the first row's first sub row. For details on how to customize
row ids, reference the control row ids section.
Control sub-rows
To control the state of the open sub-rows, provide the desired rows using the
openSubRows
prop along with a handler for the onRowSelectionChange
callback.
Use the Sparkline chart
It is possible to pass timeseries data to the DataTableV2
and visualize it
with a Sparkline
chart. To achieve this, you need to set columnType
to
sparkline
in the column definition and use the column accessor
to point to
the timeseries data that you want to process.
The Sparkline chart in the DataTableV2
can be further configured via the
column definition. You can set its color and variant by adding
config: {color: string, variant: 'line' | 'area'}
. The default configuration
of sparkline is config: {color: 'categorical', variant: 'line'}
.
Use the MeterBarChart
You can visualize numerical data within the DataTableV2
by using
MeterBarChart
s. For more information about the MeterBarChart
, refer to the
documentation. To render a
MeterBarChart
in the table, follow these steps:
- Set
columnType
tometerbar
in the column definition - Use the
accessor
property to specify which value data you want to process.
The MeterBarChart in the DataTableV2
column can be further customized through
the column definition. You can configure its appearance by using the config
prop, which includes the following options:
- color (string): Specifies the color of the
MeterBarChart
. - min (number): Sets the minimum value for the
MeterBarChart
. - max (number): Sets the maximum value for the
MeterBarChart
. - showTooltip (boolean): Controls whether tooltips are displayed.
- thresholds (array of objects
{name: string, value: number, color: string}
): Defines threshold values and their associated colors.
MultiMeterBarChart in tables
To add a MultiMeterBarChart
to the DataTableV2
, follow the steps in
MeterBarChart
in tables and then provide an array of value objects
(value: {name: string, value: number, color: string}
) as data, this will
enable DataTableV2
to visualize a MultiMeterBarChart
. For more information
about the MultiMeterBarChart
, refer to the
documentation
Again, similar to the MeterBarChart
, you can fine-tune the
MultiMeterBarChart
s appearance by setting the colorPalette
property to
define a color pattern specifically tailored for the MultiMeterBarChart
.
When data is provided as value array objects, color
and thresholds
props in
config
are ingored.
Use the Gantt chart
To visualize column data with a Gantt chart, set the columnType to gantt
. The
Gantt column definition also accepts a config
prop in the format
DataTableV2GanttColumnConfig
, which allows configuration of the following
options:
min
: Axis configuration for the minimum value (MinScaleBoundary
).max
: Axis configuration for the maximum value (MaxScaleBoundary
).xAxisType
: Whether the axis type isnumerical
ortime
.nameAccessor
: String accessor for the segment's name, which is displayed in the tooltip.colorAccessor
: String accessor for the segment's color.colorPalette
: The palette that contains the segment color mapping.showBackground
: Whether gaps between segments should receive a background.tooltipActions
: Actions that should be displayed with the default tooltip. The function provides thesegment
,row
andparent
data as parameters.tooltip
: Custom tooltip implementation. The function provides thesegment
,row
andparent
data as parameters.formatter
: Formatter options from the@dynatrace-sdk/units
package.
The data for the Gantt chart must contain the Gantt segment data in this format:
{ start: number; end?: number; }
. Each row can display one or more Gantt
segments. If multiple segments should be displayed, you can pass an array of
segment data. The segment data can also contain further properties, e.g. for
configuring its color or name, if the corresponding accessor was specified in
the config
.
Enable full width
By default, the DataTableV2
is set to automatically expand and occupy the full
width of its parent element. However, this behavior changes when the table is
placed within a flex container. In such cases, if you wish to ensure that the
table maintains full width, you can include the fullWidth
prop when using the
DataTableV2
component.
When this value is not set, it will grow as needed based on the number of columns and their width.
Control column width behavior via column definitions
The DataTableV2
provides multiple ways of controlling the column width
behavior.
-
Fixed width in pixels: You can set a fixed width for the column by specifying the exact number of pixels. For example,
width: 100
would set the column to be 100 pixels wide. -
Minimum and maximum width constraints: You can specify
minWidth
andmaxWidth
in the exact number of pixels to set width boundaries for a column. -
Flexible width in fractions: You can set a flexible width for the column using a fractional unit. This is done by specifying the width as a fraction, like
width: '1fr'
. This approach allows the column to take up a proportion of the available space, adjusting dynamically based on the total space available and the fractional values assigned to other columns. For instance, if you have two columns and set their widths towidth: '1fr'
andwidth: '2fr'
, the second column will be twice as wide as the first one. -
Fit to content: To make a column's width automatically adjust to fit the content of its cells, set the column's
width
property tocontent
. -
Shared leftover space: If you want certain columns to share the leftover space among themselves set the option
auto
for those columns. -
You can also set a maximum width for the column when using either of the previous two options by configuring it like this:
{type: 'auto' | 'content', maxWidth: 100}
. Here,maxWidth
specifies the maximum width in pixels.
Column sizing
To establish default column widths for the table, you can utilize the
defaultColumnSizing
as a DataTableV2
prop. This property requires an object
that maps column IDs to their respective widths in pixels.
Control column sizing
To activate the column resizing feature in DataTableV2
, you need to include
the resizable
property within the table’s configuration. This property acts as
a flag that, allows the columns within the table to be adjusted in width
interactively by the user.
You can track the changes in column widths during resizing events by utilizing
the onColumnSizingChange
and columnSizing
properties. The callback triggered
upon resizing delivers data regarding the current widths of all columns. This
information can be leveraged to record and maintain the dimensions of resized
columns. For instance, as demonstrated here, whenever the email column is
resized, it will revert to a default width of 300px.
Note: As soon as a resizing event is started, all columns that have a fraction width or no width defined will be locked into their current width.
Customize visual representation
The variant
prop allows you to customize the appearance of the DataTableV2
by setting the configuration options available in DataTableV2Props['variant']
.
Row density
The rowDensity
option adds spacing around the content within a row. By
default, rowDensity
is set to default
, which represents a medium spacing. If
the option is set to condensed
, the spacing becomes minimal while
comfortable
represents the maximum spacing.
Row separation
The rowSeparation
option determines how rows should be separated visually. By
default, rowSeparation
is set to horizontalDividers
which adds lines between
the rows. zebraStripes
additionally provides alternate row coloring. By
setting rowSeparation
to none
, the rows are not separated visually.
Vertical dividers
The verticalDividers
option determines whether columns should be separated
visually. By default, false
is set which does not separate the columns within
a DataTableV2
. If verticalDividers
is set to true
, lines are added between
the columns.
Contained
The contained
option provides a border for the DataTableV2
. By default,
contained
is set to true
to display the border. If false
is set, no border
is added.
Customize cell rendering
To customize the cell rendering, pass the corresponding function to the cell
prop in the column definition. If you want to maintain default cell styling, you
need to wrap each return statement with DataTableV2.DefaultCell
element. Also,
DataTableV2.DefaultCell
supports className
and style
props, allowing
further customization of the cell appearance.
Within the function passed to the cell property, you can access the cell's
value
, rowIndex
, and rowData
. Additionally, a format
and a detectLinks
function are available. The format
function allows you to apply the
formatter
options that have been configured for that cell (either via the
column definition or via the columnType). The detectLinks
function will be
automatically detect links in the passed text and render them as such using the
ExternalLink
component.
Customize column header
To customize the column header, simply utilize the header
property within the
column definition. Assign a function to this property that returns a customized
JSX element. Similar to cell, if you want to maintain default header styling,
you need to wrap each return statement with DataTableV2.DefaultCell
element.
Also, DataTableV2.DefaultCell
supports className
and style
props, allowing
further customization of the header appearance.
Caution: Avoid placing interactive elements within a custom-rendered header if column actions are already configured for the same column. Since a column header with column actions already includes a button element, adding additional interactive elements inside may result in unexpected behavior.
Enable line wrap
The DataTableV2
component offers flexible options for managing the line
wrapping of cell content within your table. Here’s how you can control it:
-
Global line wrapping configuration - To activate line wrapping across all columns, set the
defaultLineWrap
orlinWrap
property to true. -
Column-Specific line wrapping - If you prefer to enable or disable line wrapping for certain columns, pass an object to the
defaultLineWrap
property. Use column IDs as keys and set their values to true (to enable) or false (to disable). -
User-Controlled Line Wrapping - Toggle via column actions: Incorporate
TableActionsMenu.LineWrap
into your table to allow users to switch line wrapping on or off for specific columns through the column actions menu.
Props for Line Wrapping Control
The DataTableV2
also provides properties to manage line wrapping state:
defaultLineWrap
- Defines the initial state of line wrapping when the table loads.lineWrap
- Sets the line wrapping state.onLineWrapChange
- A callback function that triggers when the line wrapping state changes.
Enable sorting
By using the sortable
flag, you can enable sorting for the entire table.
Additionally, you have the option to disable sorting on a per-column basis by
configuring the disableSorting
property in the column definition. By default,
the first sorting direction is ascending. If you want to change that, you can
configure the sortDescFirst
flag for the individual column. There is also a
possibility to invert the sorting logic. Setting sortInverted
to true means
the underlying sorting direction will be inverted, but the UI will not change.
This could be useful, for example, when a lower score is better. Values like
null
and undefined
will be sorted with lower priority and will always appear
at the end of the list.
Sorting programmatically
Control sorting programmatically by setting the sortBy
prop, passing an array
with column IDs and sorting directions. Use the onSortByChange
callback to
monitor and manipulate sorting changes within the DataTableV2
. If you want to
sort your data before it is passed to the table, you need to disable built-in
sorting by setting sortable={ manualSorting: true }
. This is particularly
useful for server-side sorting. To initially sort tables without controlling
their state, use defaultSortBy
."
Define a sortAccessor
In case the value that should be used for sorting differs from the one returned
by the accessor, it is possible to define a custom sortAccessor
in the column
definition. For example, if the accessor returns an object, the sortAccessor may
return a number or string field within the object.
Enable pagination
To enable pagination add the DataTableV2.Pagination
component to your table.
This component allows you to configure the page size and the page index via the
defaultPageSize
and defaultPageIndex
props.
Change page size options
The default page size options are 10, 20, 30, 40 and 50. To customize these
options, use the pageSizeOptions
prop, which allows you to pass the desired
page sizes as an array. Please ensure that the passed (default) page size aligns
with the defined options. The table will not sanitize page sizes that do not
exist in the options.
Control pagination
It is also possible to control the page size and the page index using the
pageSize
and the pageIndex
props together with the pageSizeChange
and the
pageIndexChange
callbacks. The onPageChange
callback allows you to react to
changes in both the page size and the page index.
Use server-side pagination
In addition to the regular client-side pagination, it is also possible to use
server-side pagination. For server-side pagination, pass the data for the
respective page to the table and update the enablePrevPage
and
enableNextPage
flags accordingly. Upon navigating to another page or changing
the page size the corresponding callbacks as well as the onPageChange
callbacks provide the updated values, allowing you to retrieve the corresponding
data.
Enable row selection
To activate row selection in DataTableV2
, you must configure the
selectableRows
prop on the table. Assigning a boolean value to this prop will
generate a checkbox in the first column across all rows, enabling selection
functionality. Alternatively, selectableRows
can be defined as an object,
allowing for further customization through the following options:
-
disableRowSelection
- accepts a function that takes the row's data as input and returns a boolean value. If it returnstrue
, the row will be non-selectable iffalse
, the row will be selectable. -
selectAllBehavior
- a string value that specifies whether the ‘Select All’ action applies to only the currently visible rows on the page or to all rows within the table. -
limit
- A positive integer that sets the maximum number of selectable rows.
Note that when pagination is implemented, any selections on non-visible pages will be cleared upon page change. Generally, selections are reset whenever there is a change in the data set.
To set up rows that should be selected as soon as your table loads, you need to
use a prop defaultSelectedRows
. This option should be assigned an object that
specifies which rows are selected. Each row is identified by its id, and the
selection state is indicated by a boolean value (true for selected, false for
not selected).
Control row selection
When you want to control which rows are selected, you use the selectedRows
prop. This prop allows you to specify which rows should be considered ‘selected’
at any given time. To make this dynamic, so that it can change in response to
user actions, you also provide a handler function for the onRowSelectionChange
callback.
Here’s how it works:
selectedRows
prop: This is where you pass an object that represents the currently selected rows. Each row is identified by its id, and the selection state is indicated by a boolean value (true for selected, false for not selected).onRowSelectionChange
callback: This function is called whenever the selection changes, such as when a user clicks on a row checkbox. The callback function receives information about the new set of selected rows. By using these two together, you can maintain the selection state outside of the component, giving you full control over the behavior of the selection.
In a controlled pagination system, unlike an uncontrolled one, the row selections made by the user are not reset automatically when navigating through pages. It’s essential to maintain clarity for the user regarding their selections. Therefore, it’s advisable to avoid enabling row selections on non-visible pages—such as those beyond the currently active page. This is because selections that are out of view can confuse users, as they might forget what they’ve selected.
If there’s a compelling reason to allow selections on pages that the user isn’t currently viewing, it’s important to provide a way to track all selected rows.
Control row ids
Features like row selection, subrows and row interactivity by default use a row
id based on the index of the data that is passed. This can be problematic when
you want to persist any of the states while the data itself changes. For this
usecase you are able to change how rows are identified by providing a rowId
function on the DataTableV2
. When providing a custom row id function, for sub
row identification, the row ids will be separated by ↳
character.
Enable expandable rows
Expandable rows allow you to add additional data to a row. This information is only visible when the row is expanded.
The default state of each row can be controlled using the defaultExpandedRows
prop on the DataTableV2.ExpandableRow
slot child. To control each row over the
lifetime of the table use the expandedRows
property and the
onExpandedRowsChange
callback.
In this example, every second row is disabled for demo purposes.
Loading state
Use the loading
prop to display a loading indicator. This can be used for the
initial load where columns and data are not yet available, when waiting for data
to be fetched or when performing actions such as moving to the next page. The
loading indicator will adjust accordingly depending on whether columns and data
are already loaded.
Initial table load
Load data
Customize empty state
The DataTableV2.EmptyState
component allows you to configure a custom empty
state that will be displayed if no data is available.
Configure selected rows actions
The DataTableV2.SelectedRowsActions
component provides an additional slot
where you can perform actions on one or more selected rows in the DataTable
simultaneously. Actions passed to this slot are placed right above the table
header and are shown only when at least one row is selected. If table actions
exist, they are hidden when the selected rows actions menu is active.
Configure table actions
The DataTableV2.TableActions
component provides an additional slot where you
can place custom actions that affect the entire table. Actions passed to this
slot are placed right above the table header.
Configure column actions
The column actions are represented by a button in a column header that opens a drop-down menu. Within the menu, you can include various functionalities allowing end users to perform actions related to the column of the table.
To configure column actions you need to define the DataTableV2.ColumnActions
slot component.
Within the DataTableV2.ColumnActions
tag, a function is placed. This function
is designed to receive the current column’s details, enabling the customization
of actions for that column. The function needs to return a TableActionsMenu
object that defines the user actions for the cell and the
TableActionsMenu.Item
slot component that represents a single action item. You
can assign an onSelect
event as a property of this component, which will
execute the specified action upon user interaction. Additionally, the
TableActionsMenu.ItemIcon
property can be applied to the item to incorporate
an icon for the action trigger element.
To configure actions for a particular column its ID must be provided to the
column
property. If default actions should be available for all columns that
do not explicitly have actions configured, the DataTableV2.ColumnActions
column ID is omitted.
Configure cell actions
The cell actions are represented by a button in a table cell that opens a drop-down menu. Within the menu, you can include various functionalities allowing end users to perform actions related to the cell of the table.
To configure cell actions you need to define the DataTableV2.CellActions
slot
component. Within the DataTableV2.CellActions
tag, a function is placed. The
function needs to return a TableActionsMenu
object that defines the user
actions for the cell and the TableActionsMenu.Item
slot component that
represents a single action item. You can assign an onSelect
event as a
property of this component, which will execute the specified action upon user
interaction. Additionally, the TableActionsMenu.ItemIcon
property can be
applied to the item to incorporate an icon for the action trigger element.
To assign actions to the cells in a specific column, you need to specify the
unique identifier (ID) of the column. This ID is then used as the value for the
column
property within the DataTableV2.CellActions
configuration. This tells
the DataTableV2
which column the actions should be associated with. If default
actions should be available for all columns that do not explicitly have actions
configured, the column ID is omitted.
Configure row actions
Configuring row actions in a DataTableV2
involves adding an action column to
the far right of the table. This column should contain buttons, menus, or links
that allow users to perform actions specific to each row.
To set up row actions in the table you need to locate DataTableV2.RowActions
slot component as a DataTableV2
child. This component takes a function that
receives the current row’s data as well as some meta information about the
tables layout as its parameters. This allows you to access and manipulate the
data for that specific row. The function needs to return a ReactNode
that
defines the user actions for the row. Most likely you want to add some primary
actions as buttons and secondary actions into a menu.
Configure column visibility
The column visibility feature allows you to specify which columns should be
visible and which should be hidden. Use the defaultColumnVisibility
prop to
define the column visibility state. Provide an object with the respective column
IDs as keys and boolean values indicating their visibility. A value of true
means the column is visible, while false
means it is hidden. By default, all
columns are visible.
Column visibility UI elements
To allow the user to show and hide columns, you need to configure the
corresponding UI elements in the table. Column visibility can be controlled
through either the DataTableV2.Toolbar
or the DataTableV2.ColumnActions
.
Use the DataTableV2.VisibilitySettings
component inside the toolbar, to render
a trigger for the column settings overlay and enable the visibility settings. To
enable users to hide a column via the column actions, include the
TableActionsMenu.HideColumn
as a menu item.
If you want to prevent a certain column from being hidden, set the
disableColumnHiding
prop to true
in the column definition for this column.
Control column visibility
To control column visibility, use the columnVisibility
prop to provide the
visibility state, along with the onColumnVisibilityChange
callback which
allows you to react to visibility changes.
Column visibility reset
Column visibility can be reset to default original value using the column
settings overlay trigger in toolbar. A custom reset state can be set using the
resetColumnVisibility
prop in DataTableV2.VisibilitySettings
component,
which allows the column visibility state to be set to the provided reset state.
In uncontrolled, the column visibility resets to defaultColumnVisibility
prop
state if present or original visibility state. This ensures that the columns can
be easily reverted to their default visibility state whenever needed. Reset
button is disabled when the current state is the same as the default state.
Configure column order
By default, the table columns are ordered as defined in the column definition.
The column order feature allows you to specify the order in which the columns
should be displayed. Use the defaultColumnOrder
prop to define the column
order by providing an array of all column IDs in the desired order.
The defined column order should include all columns and ensure that child columns with the same parent are not separated. To avoid invalid configurations, the passed column order is validated and corrected if necessary. The following issues will be resolved:
- duplicate column IDs
- column ids that don't exist in the column definition
- missing column IDs
- column IDs within the same group that are not adjacent
Column order UI elements
To allow the user to change the column order, you need to configure the
corresponding UI elements in the table. Column order can be controlled through
either the DataTableV2.Toolbar
or the DataTableV2.ColumnActions
.
Use the DataTableV2.ColumnOrderSettings
component inside the toolbar, to
render a trigger for the column settings overlay and enable the column order
settings. To enable users to move a column via the column actions, include the
TableActionsMenu.ColumnOrder
as a menu item.
Control column order
To control column order, use the columnOrder
prop to provide the desired
order, along with the onColumnOrderChange
callback which allows you to react
to changes in the column order.
Column order reset
Column order can be reset to default original value using column settings
overlay trigger inside the toolbar. A custom reset state can be set using the
resetColumnOrder
prop can be set in DataTableV2.ColumnOrderSettings
component, which allows the column order state to be set to the provided reset
state. In uncontrolled, the column order resets to defaultColumnOrder
prop
value if present or original order. This ensures that the columns can be easily
reverted to their default order whenever needed. Reset button is disabled when
the current state is the same as the default state.
Highlight cells
Cells can be highlighted in different colors depending on the specified
threshold. In the column definition, you can configure the threshold for every
column. You can specify value, comparator
, color
, backgroundColor
, and
accessor
. The color
will be applied to the cell text and backgroundColor
to the cell background. The accessor
prop can also be used for providing
custom accessor for the cell value that can be used for threshold calculations.
If the column cell value passed is a string (text), the threshold comparator can
be set with either an equal-to
or not-equal-to
operator. On the other hand,
if your value is a number, you can utilize one of the following operators:
greater-than
less-than
greater-than-or-equal-to
less-than-or-equal-to
equal-to
not-equal-to
If the value of the cell
is an object, the threshold
accessor
could return
a specific attribute within the object, such as a number
or string
. This
allows for more complex threshold calculations based on specific attributes of
object values.
Note: When multiple thresholds are applicable (evaluate to true) the final valid threshold has priority. Also, if both row and column thresholds apply to a cell, the column threshold takes precedence over the row threshold.
Highlight rows
You have the option to highlight an entire row. The thresholds for row
highlighting can be configured at the table level using the rowThresholds
prop. This prop accepts the same options as the cell threshold with the addition
of a type
. However, it also allows you to specify which cell value should be
used for the row threshold by defining an accessor or id.
You can add either a single rule or multiple rules to the threshold definition. If you choose to use multiple rules, you can define different thresholds for different cell values within a row. However, regardless of which threshold is met, the same color will be applied to the entire row.
The type
determines how the highlighted row will be visually marked. The
pill
type accepts a color
and shows a marker on the start of the row. The
hightlight
type accepts color
and backgroundColor
and changes the
textcolor and background color of all cells in a row.
Define custom comparator
You can define a custom comparator
function to evaluate the threshold
using
your own logic. This function should return a boolean
. If it returns true
,
the threshold
is applied; if false
, it's not. The function receives the row
data as input. Please note that this custom comparator
function will not be
serialized for sharing via intents.
Download data
The DataTableV2.Toolbar
has an item DownloadData
which enables the
downloading of the table data. Depending on your table configuration, you can
choose between downloading all data, downloading the current page and only
downloading the selected rows. Only visible columns are considered.
When downloading, double quotes are escaped and if the text has commas, new
lines, double quotes, tabs or carriage returns, the entire line is enclosed in
double quotes. In addition, values starting with =
, +
, -
, @
, \t
and
\r
are escaped with a single quote to mitigate CSV injection. Also note that
if you have custom cells you can provide a toString
function on the data
object for customized download output.
The DataTableV2
also provides the onDownloadData
callback that fires once
data has been downloaded. The callback's subset
parameter indicates whether
all data, the current page, or the selected rows were downloaded.
Format cell data
You can format the cell data via the column definition, by specifying the column
property formatter
. For configuration, use the corresponding options from
'@dynatrace-sdk/units', i.e. FormatOptions
for numbers and FormatDateOptions
for dates.
Hiding the table header
You can customize the DataTableV2
s appearance to hide the entire header, by
setting variant={{ headers: 'hidden' }}
on the DataTableV2
component.
If you choose to hide the header, please note that the ability to sort columns or any actions that can be triggered via column headers will not be available.
Export Config
The DataTableV2
's configuration can be exported at any time for various
purposes, such as sharing the configuration with other applications
through an intent. The current configuration
can be retrieved by creating and assigning a ref
to the corresponding ref
property of the DataTable
, and then calling ref.getConfig()
method.
ℹ️️ When the "getConfig" method is invoked, a snapshot of the serialized configuration is returned. As such, it will not change if the
DataTableV2
's configuration is subsequently modified. It is recommended to ensure that you apply all your required configurations to theDataTableV2
before calling this method
Import Config
The configuration provider for the DataTableV2
accepts a JSON object and also
accepts a string
as input for importing a serialized configuration. When a
string is provided, it is internally parsed and applied as the DataTableV2
configuration.
ℹ️️ Please note that if the configuration provided does not match the properties of the
DataTableV2
configuration, any unknown properties will be ignored. Additionally, if required properties are not provided, or the given config is invalid, default values will be applied.
ℹ️️ It is important to note that due to potential version mismatches in
DataTableV2
packages used in different applications, importing a configuration from another application may produce an unintended outcome and not result in a perfect match.