Data table manager custom configurations story (#2938)

* feat(data table manager): add data table manager story for custom data table configurations * feat(data table manager): update type description * feat(data table manager): split data table stories * feat(data table manager): update readme to include some descriptions of custom data table settings * feat(data table manager): correct readme mistake --------- Co-authored-by: Ddouglasz <[email protected]>
commercetools · Oct 10, 2024 · 38c2dfe · 38c2dfe
1 parent 7e4edc7
commit 38c2dfe
Show file tree

Hide file tree

Showing 8 changed files with 1,426 additions and 391 deletions.
diff --git a/.changeset/silver-keys-stare.md b/.changeset/silver-keys-stare.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/data-table-manager': minor
+---
+
+Add storybook story for custom data table manager configurations.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,6 +1,6 @@
 # https://help.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository#configuring-the-template-chooser
 blank_issues_enabled: true
 contact_links:
-  - name: Commercetools Support
+  - name: commercetools Support
     url: https://support.commercetools.com
     about: Have an issue or question? Ask our support team!
diff --git a/packages/components/data-table-manager/README.md b/packages/components/data-table-manager/README.md
@@ -68,7 +68,7 @@ export default Example;
 
 ### Detached
 
-As mentioned earlier, the default behaviour 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.
+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.
 
@@ -110,6 +110,31 @@ const Example = () => (
 export 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.
+
+```jsx
+import { ColumnSettingsManager } from '@commercetools-uikit/data-table-manager/column-settings-manager';
+
+<DataTableManagerProvider
+  columns={columns}
+  onSettingsChange={() => tableSettingsChangeHandler}
+  columnManager={columnManager}
+  displaySettings={displaySettings}
+  customSettings={customSettings}
+  selectedColumns={selectedColumns}
+  customColumnManager={customColumnManager}
+  customColumns={visibleCustomColumns}
+>
+  <DataTable rows={rows} />
+</DataTableManagerProvider>;
+```
+
 ## Properties
 
 | Props                                                  | Type                                                        | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |