npmpackage.info

Gathering detailed insights and metrics for @commercetools-uikit/data-table-manager

@commercetools-uikit/data-table-manager - 20.2.2 | npmpackage.info

@commercetools-uikit/data-table-manager

Component library 💅

20.2.2

148

MIT

TypeScript

315.21 kB

7.2

Installations

npm install @commercetools-uikit/data-table-manager

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.17.0

NPM Version

10.9.2 Pull Requests

Open

20

Total

2,855

Closed

578

Merged

2,257

Issues

Open

43

Total

292

Closed

249

Releases

8,198

v20.2.2

Updated on Jul 08, 2025

v20.2.1

Updated on Jul 07, 2025

v20.2.0

Updated on Jun 30, 2025

v20.1.0

Updated on Jun 16, 2025

v20.0.0

Updated on Jun 02, 2025

v19.26.0

Updated on May 27, 2025

View All 8,198 releases

Languages

TypeScript

JavaScript

MDX

CSS

HTML

Prolog

Shell

TypeScript (59.12%)

JavaScript (36.8%)

MDX (2.8%)

CSS (1.02%)

HTML (0.16%)

Prolog (0.06%)

Shell (0.04%)

Developer

commercetools

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

148 Stars

3,452 Commits

27 Forks

15 Watchers

124 Branches

351 Contributors

Updated on Jul 09, 2025

Maintainers

View All 351 Contributors

Package Meta Information

Latest Version

20.2.2

Package Id

@commercetools-uikit/data-table-manager@20.2.2

Unpacked Size

315.21 kB

Size

56.35 kB

File Count

NPM Version

10.9.2

Node Version

22.17.0

Published on

Jul 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

react react-dom react-intl

Dev Dependencies

formik react react-dom react-intl

DataTableManager

Description

This component enhances the <DataTable> component and additionally provides a UI and state management to handle configuration of the table such as column manager.

The disableDisplaySettings enables / disables the layout settings panel, allowing the user to select wrapping text and density display options.
The disableColumnManager enables / disables the column manager panel, allowing the user to select which columns are visible.

Both panels delegate the handling of the settings change on the parent through function properties, allowing the settings to be persisted or just used as state props.

This component will render a triggering element (icon button) above the <DataTable> (top-right corner) which users can click to select the panel to open.

Installation

yarn add @commercetools-uikit/data-table-manager

npm --save install @commercetools-uikit/data-table-manager

Additionally install the peer dependencies (if not present)

yarn add react react-dom react-intl

npm --save install react react-dom react-intl

Usage

There are two ways this component can be used:

Attached

The basic usage is when it just wraps the DataTable component.

1import DataTableManager from '@commercetools-uikit/data-table-manager';
2import DataTable from '@commercetools-uikit/data-table';
3
4const rows = [
5  { id: 'parasite', title: 'Parasite', country: 'South Korea' },
6  { id: 'portrait', title: 'Portrait of a Lady on Fire', country: 'France' },
7  { id: 'wat', title: 'Woman at War', country: 'Iceland' },
8];
9
10const columns = [
11  { key: 'title', label: 'Title' },
12  { key: 'country', label: 'Country' },
13];
14
15const Example = () => (
16  <DataTableManager columns={columns}>
17    <DataTable rows={rows} />
18  </DataTableManager>
19);
20
21export default Example;

Detached

As mentioned earlier, the default behavior places the triggering element above the <DataTable> component (top-right corner), but there may be use cases where the triggering element needs to be positioned differently on the page. This is also possible but requires the usage of one more component (DataTableManagerProvider) in order to share the manager state between the manager panels and the DataTable component.

In this mode, you should pass the manager props to the DataTableManagerProvider component and the DataTableManager does not need to receive any prop; it can be placed anywhere in the component's tree without requiring any prop.

1import DataTableManager, {
2  DataTableManagerProvider,
3} from '@commercetools-uikit/data-table-manager';
4import DataTable from '@commercetools-uikit/data-table';
5import SearchTextInput from '@commercetools-uikit/search-text-input';
6
7const rows = [
8  { id: 'parasite', title: 'Parasite', country: 'South Korea' },
9  { id: 'portrait', title: 'Portrait of a Lady on Fire', country: 'France' },
10  { id: 'wat', title: 'Woman at War', country: 'Iceland' },
11];
12
13const columns = [
14  { key: 'title', label: 'Title' },
15  { key: 'country', label: 'Country' },
16];
17
18const SomeOtherComponent = () => {
19  return <div>Some other component</div>;
20};
21
22const Example = () => (
23  <DataTableManagerProvider columns={columns}>
24    <header>
25      <DataTableManager />
26      <SearchTextInput />
27    </header>
28    <main>
29      <SomeOtherComponent />
30      <DataTable rows={rows} />
31    </main>
32  </DataTableManagerProvider>
33);
34
35export default Example;

With custom configuration settings

The DataTableManager provides a feature for users to add custom configurations to the data table settings.

To configure the data table manager, you can pass in your own jsx component and all the expected actions and states you want to control.

The ColumnSettingsManager component is also exposed for users to consume and pass in configuration of choice for custom column configurations, pass in your settings through the customColumnManager props.

1import { ColumnSettingsManager } from '@commercetools-uikit/data-table-manager/column-settings-manager';
2
3<DataTableManagerProvider
4  columns={columns}
5  onSettingsChange={() => tableSettingsChangeHandler}
6  columnManager={columnManager}
7  displaySettings={displaySettings}
8  customSettings={customSettings}
9  selectedColumns={selectedColumns}
10  customColumnManager={customColumnManager}
11  customColumns={visibleCustomColumns}
12>
13  <DataTable rows={rows} />
14</DataTableManagerProvider>;

Properties

Props	Type	Required	Default	Description
`columns`	`array`	✅		Each object requires a unique `key` which should correspond to property key of the items of `rows` that you want to render under this column, and a `label` which defines the name shown on the header. The list of columns to be rendered. Each column can be customized (see properties below).
`columns[].key`	`string`	✅		The unique key of the column that is used to identify your data type. You can use this value to determine which value from a row item should be rendered. For example, if the data is a list of users, where each user has a `firstName` property, the column key should be `firstName`, which renders the correct value by default. The key can also be some custom or computed value, in which case you need to provide an explicit mapping of the value by implementing either the `itemRendered` function or the column-specific `renderItem` function.
`columns[].label`	`node`	✅		The label of the column that will be shown on the column header.
`columns[].width`	`string`		`auto`	Sets a width for this column. Accepts the same values as the ones specified for individual grid-template-columns. For example, using `minmax` pairs (e.g. `minmax(200px, 400px)`), a combinations of fraction values (`1fr`/`2fr`/etc), or fixed values such as `200px`. By default, the column grows according to the content and respecting the total table available width.
`columns[].align`	`enum` Possible values: `'left', 'center', 'right'`			Use this to override the table's own `horizontalCellAlignment` prop for this specific column.
`columns[].onClick`	`func`			A callback function, called when the header cell is clicked. Signature: `(event) => void`
`columns[].renderItem`	`func`			A callback function to render the content of cells under this column, overriding the default `itemRenderer` prop of the table. Signature: `(row: object, isRowCollapsed: boolean) => React.Node`
`columns[].headerIcon`	`node`			Use this prop to place an `Icon` or `IconButton` on the left of the column label. It is advised to place these types of components through this prop instead of `label`, in order to properly position and align the elements. This is particularly useful for medium-sized icons which require more vertical space than the typography.
`columns[].isTruncated`	`bool`		`false`	Set this to `true` to allow text content of this cell to be truncated with an ellipsis, instead of breaking into multiple lines. NOTE: when using this option, it is recommended to specify a `width` for the column, because if the table doesn't have enough space for all columns, it will start clipping the columns with truncated content, and if no `width` is set (or the value is set `auto` -- the default) it can shrink until the column disappears completely. By enforcing a minimum width for these columns, the table will respect them and grow horizontally, adding scrollbars if needed.
`columns[].isSortable`	`bool`		`false`	Set this to `true` to show a sorting button, which calls `onSortChange` upon being clicked. You should enable this flag for every column you want to be able to sort. When at least one column is sortable, the table props `sortBy`, `sortDirection` and `onSortChange` should be provided.
`columns[].disableResizing`	`bool`		`false`	Set this to `true` to prevent this column from being manually resized by dragging the edge of the header with a mouse.
`columns[].shouldIgnoreRowClick`	`bool`		`false`	Set this to `true` to prevent click event propagation for this cell. You might want this if you need the column to have its own call-to-action or input while the row also has a defined `onRowClick`.
`children`	`node`	✅		Any React node. Usually you want to render the `<DataTable>` component. Note that the child component will implicitly receive the props `columns` and `isCondensed` from the `<DataTableManager>`.
`displaySettings`	`object`			The managed display settings of the table.
`displaySettings.disableDisplaySettings`	`bool`		`true`	Set this flag to `false` to show the display settings panel option.
`displaySettings.isCondensed`	`bool`		`false`	Set this to `true` to reduce the paddings of all cells, allowing the table to display more data in less space.
`displaySettings.isWrappingText`	`bool`		`false`	Set this to `true` to allow text in a cell to wrap. This is required if `disableDisplaySettings` is set to `false`.
`displaySettings.primaryButton`	`element`			A React element to be rendered as the primary button, useful when the display settings work as a form.
`displaySettings.secondaryButton`	`element`			A React element to be rendered as the secondary button, useful when the display settings work as a form.
`columnManager`	`object`			The managed column settings of the table.
`columnManager.disableColumnManager`	`bool`		`true`	Set this to `false` to show the column settings panel option.
`columnManager.visibleColumnKeys`	Array of `string`			The keys of the visible columns.
`columnManager.hideableColumns`	`array`			The keys of the visible columns.
`columnManager.hideableColumns[].key`	`string`	✅
`columnManager.hideableColumns[].label`	`<string, node>`	✅
`columnManager.areHiddenColumnsSearchable`	`bool`			Set this to `true` to show a search input for the hidden columns panel.
`columnManager.searchHiddenColumns`	`func`			A callback function, called when the search input for the hidden columns panel changes. Signature: `(searchTerm: string) => Promise<void>`
`columnManager.searchHiddenColumnsPlaceholder`	`string`			Placeholder value of the search input for the hidden columns panel.
`columnManager.primaryButton`	`element`			A React element to be rendered as the primary button, useful when the column settings work as a form.
`columnManager.secondaryButton`	`element`			A React element to be rendered as the secondary button, useful when the column settings work as a form.
`columnManager.columnManagerLabel`	`node`			This value overrides the default label that will be shown on the column header and dropdown.
`onSettingsChange`	`func`			A callback function, called when any of the properties of either display settings or column settings is modified. Signature: `(action: string, nextValue: object) => void`
`topBar`	`node`			A React node for rendering additional information within the table manager.
`managerTheme`	`enum` Possible values: `'light', 'dark'`			Sets the background theme of the Card that contains the settings
`customSettings`	`JSON`			A JSON object carrying all the settings for each custom panel. When using the customSettings, each item in the custom setting can be designed to serve as an interface for data table configuration, It should at least have a `key`, `customPanelTitle`, and `customComponent` as property.
`customSettings['key']`	`string`	✅		The key of the custom component. Every panel is identifiable by it's unique key provided in the JSON object.
`customSettings['key'].customPanelTitle`	`string`	✅		The title of the custom component setting
`customSettings['key'].customComponent`	`ReactNode`			A component added to the settings interface to provide additional configuration for the data table setting
`customColumnManager.disableCustomColumnManager`	`bool`		`true`	Set this to `false` to show the column settings panel option.
`customColumnManager.visibleColumnKeys`	Array of `string`			The keys of the visible columns.
`customColumnManager.hideableColumns`	`array`			The keys of the hideable columns.
`customColumnManager.hideableColumns[].key`	`string`	✅		The uniqque key of each hideable column.
`customColumnManager.hideableColumns[].label`	`<string, node>`	✅		The label of each hideable column.
`customColumnManager.areHiddenCustomColumnsSearchable`	`bool`			Set this to `true` to show a search input for the hidden columns panel.
`customColumnManager.searchHiddenColumns`	`func`			A callback function, called when the search input for the hidden custom columns panel changes. Signature: `(searchTerm: string) => Promise<void>`
`customColumnManager.searchHiddenColumnsPlaceholder`	`string`			Placeholder value of the search input for the hidden custom columns panel.
`customColumnManager.primaryButton`	`element`			A React element to be rendered as the primary button, useful when the custom column settings work as a form.
`customColumnManager.secondaryButton`	`element`			A React element to be rendered as the secondary button, useful when the custom column settings work as a form.

*: DataTableManagerProvider component accepts the same properties as the DataTableManager

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

SAST

Determines if the project uses static code analysis.

9

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-inactive-issues.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/close-inactive-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/merge-blocking-labels.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/merge-blocking-labels.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More