feat(mdx): add new table mdx file

eclipse-tractusx · Jul 8, 2024 · 628a309 · 628a309
1 parent bc69e97
commit 628a309
Showing 1 changed file with 296 additions and 0 deletions.
diff --git a/src/components/basic/Table/Table.mdx b/src/components/basic/Table/Table.mdx
@@ -0,0 +1,296 @@
+{/**\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***\***\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***
+
+- Copyright (c) 2024 Contributors to the Eclipse Foundation
+-
+- See the NOTICE file(s) distributed with this work for additional
+- information regarding copyright ownership.
+-
+- This program and the accompanying materials are made available under the
+- terms of the Apache License, Version 2.0 which is available at
+- https://www.apache.org/licenses/LICENSE-2.0.
+-
+- Unless required by applicable law or agreed to in writing, software
+- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+- License for the specific language governing permissions and limitations
+- under the License.
+-
+- SPDX-License-Identifier: Apache-2.0
+  **\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***\***\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***/}
+
+import { Story, Meta } from '@storybook/blocks'
+import { SharedThemeProvider } from '../SharedThemeProvider'
+import { SharedCssBaseline } from '../SharedCssBaseline'
+import { Table } from '.'
+import TestRows from '../../../../src/assets/data/TableRows.json'
+
+<Meta title="Design Guidelines/Table" />
+
+## Table
+
+### Overview
+
+The `Data Table` component is a versatile UI element designed to display data in a structured format with enhanced functionalities such as searching, filtering, and action buttons. It also includes error and warning notifications for missing backend data or other issues.
+
+### Features
+
+<b>Search</b>: Allows users to search and find data within the table quickly.\
+<b>Filter</b>: Provides options to filter data based on various criteria.\
+<b>Action Buttons</b>: Offers buttons for performing actions on table data
+(e.g., edit, delete).\
+<b>Warning & Error Notifications</b>: Displays messages to alert users of issues
+such as missing data.
+
+#### Theming
+
+Horizontal/Vertical Table\
+Modern and basic table style\
+
+#### Interactive Elements
+
+<b>Checkboxes</b>: Allow users to select one or multiple table rows. Use for
+batch actions or comparisons.\
+<b>Detail View Icons</b>: Provide icons that, when clicked, expand a row or open
+a side panel with more detailed information.\
+<b>Alert Icons</b>: Use icons to indicate the status of a row or cell, such as
+error or warning states.\
+<b>Pagination</b>: Implement pagination to manage large datasets, allowing users
+to navigate through different pages.\
+<b>Chipcards</b>: Utilize chipcards to represent complex data tags, status
+indicators, or categories within table cells.
+
+### Usage
+
+#### Do's
+
+<b>Do</b> use the Data Table component to present large datasets in an organized
+manner.\
+<b>Do</b> utilize the search feature to make the table's data more accessible.\
+<b>Do</b> apply filters to help users view subsets of the data based on specific
+parameters.\
+<b>Do</b> ensure that action buttons are used where appropriate to provide clear
+functionality.\
+<b>Do</b> implement error and warning notifications to inform users of any data issues.
+
+#### Don'ts
+
+<b>Don't</b> use the Data Table component for displaying simple or small datasets
+where a table may be overkill.\
+<b>Don't</b> overcrowd the table with too many action buttons, which can confuse
+users.\
+<b>Don't</b> ignore the importance of responsive design. Ensure the table is usable
+on various devices and screen sizes.
+
+### Error Handling
+
+In case of missing backend data, the table should display a clear and concise error message such as "Data could not be loaded. Please try again later."\
+Warnings for incomplete or inconsistent data should be shown using a different style or icon to distinguish them from error messages.
+
+### Accessibility
+
+Ensure that the table is navigable using keyboard shortcuts.\
+Provide proper ARIA roles and attributes to enhance screen reader compatibility.\
+Make sure that search, filter, and action buttons are accessible and labeled correctly.
+
+<SharedThemeProvider>
+<SharedCssBaseline />
+<Table 
+  autoHeight={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  hideFooter={true}
+  disableColumnFilter={true}
+  disableColumnMenu={true}
+  disableColumnSelector={true}
+  disableDensitySelector={true}
+  disableSelectionOnClick={true}
+  checkboxSelection={true}
+  loading={false}
+  hasBorder={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  columnHeadersBackgroundColor={'#fff'}
+  searchPlaceholder={'Search by username'}
+  noRowsMsg={'No rows'}
+  columns={[
+  {
+    field: 'name',
+    headerName: 'Name',
+    description: 'Name of the user',
+    flex: 2
+  },
+  { field: 'company', headerName: 'Company', flex: 2 },
+  {
+    field: 'email',
+    headerName: 'Email address',
+    flex: 4
+  },
+  { field: 'note', headerName: 'Note', flex: 5 },
+  {
+    field: 'role',
+    headerName: 'Role',
+    flex: 1
+  }]}
+  rows={TestRows}
+  title={'Table with toolbar'}
+  toolbarVariant={'premium'}
+  toolbar={{
+    buttonLabel: 'Add user',
+    onButtonClick: () => console.log('on button click'),
+    buttonDisabled: true,
+    buttonTooltip: 'Not able to add',
+    secondButtonLabel: 'Add Multiple users',
+    onSecondButtonClick: () => console.log('on multiple button click'),
+    onSearch: (value) => console.log(`search: "${value}"`),
+    onFilter: (selectedFilter) => console.log('filter:', selectedFilter),
+    filter: [
+      {
+        name: 'role',
+        values: [
+          { value: 'admin', label: 'Admin' },
+          { value: 'editor', label: 'Editor' },
+          { value: 'manager', label: 'Manager' },
+        ],
+      },
+    ],
+  }}
+ />
+
+{' '}
+<br />
+
+{' '}
+<Table
+  autoHeight={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  hideFooter={true}
+  disableColumnFilter={true}
+  disableColumnMenu={true}
+  disableColumnSelector={true}
+  disableDensitySelector={true}
+  disableSelectionOnClick={true}
+  checkboxSelection={true}
+  loading={false}
+  hasBorder={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  columnHeadersBackgroundColor={'#fff'}
+  searchPlaceholder={'Search by username'}
+  noRowsMsg={'No rows'}
+  error={{
+    status: 500,
+  }}
+  columns={[
+    {
+      field: 'name',
+      headerName: 'Name',
+      description: 'Name of the user',
+      flex: 2,
+    },
+    { field: 'company', headerName: 'Company', flex: 2 },
+    {
+      field: 'email',
+      headerName: 'Email address',
+      flex: 4,
+    },
+    { field: 'note', headerName: 'Note', flex: 5 },
+    {
+      field: 'role',
+      headerName: 'Role',
+      flex: 1,
+    },
+  ]}
+  rows={[]}
+  title={'Table with toolbar'}
+  toolbarVariant={'premium'}
+  toolbar={{
+    buttonLabel: 'Add user',
+    onButtonClick: () => console.log('on button click'),
+    buttonDisabled: true,
+    buttonTooltip: 'Not able to add',
+    secondButtonLabel: 'Add Multiple users',
+    onSecondButtonClick: () => console.log('on multiple button click'),
+    onSearch: (value) => console.log(`search: "${value}"`),
+    onFilter: (selectedFilter) => console.log('filter:', selectedFilter),
+    filter: [
+      {
+        name: 'role',
+        values: [
+          { value: 'admin', label: 'Admin' },
+          { value: 'editor', label: 'Editor' },
+          { value: 'manager', label: 'Manager' },
+        ],
+      },
+    ],
+  }}
+/>
+
+{' '}
+<br />
+
+ <Table 
+  autoHeight={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  hideFooter={true}
+  disableColumnFilter={true}
+  disableColumnMenu={true}
+  disableColumnSelector={true}
+  disableDensitySelector={true}
+  disableSelectionOnClick={true}
+  checkboxSelection={true}
+  loading={false}
+  hasBorder={true}
+  columnHeaderHeight={76}
+  rowHeight={76}
+  columnHeadersBackgroundColor={'#fff'}
+  searchPlaceholder={'Search by username'}
+  noRowsMsg={'No rows'}
+  error={{
+    status: 400
+  }}
+  columns={[
+  {
+    field: 'name',
+    headerName: 'Name',
+    description: 'Name of the user',
+    flex: 2
+  },
+  { field: 'company', headerName: 'Company', flex: 2 },
+  {
+    field: 'email',
+    headerName: 'Email address',
+    flex: 4
+  },
+  { field: 'note', headerName: 'Note', flex: 5 },
+  {
+    field: 'role',
+    headerName: 'Role',
+    flex: 1
+  }]}
+  rows={[]}
+  title={'Table with toolbar'}
+  toolbarVariant={'premium'}
+  toolbar={{
+    buttonLabel: 'Add user',
+    onButtonClick: () => console.log('on button click'),
+    buttonDisabled: true,
+    buttonTooltip: 'Not able to add',
+    secondButtonLabel: 'Add Multiple users',
+    onSecondButtonClick: () => console.log('on multiple button click'),
+    onSearch: (value) => console.log(`search: "${value}"`),
+    onFilter: (selectedFilter) => console.log('filter:', selectedFilter),
+    filter: [
+      {
+        name: 'role',
+        values: [
+          { value: 'admin', label: 'Admin' },
+          { value: 'editor', label: 'Editor' },
+          { value: 'manager', label: 'Manager' },
+        ],
+      },
+    ],
+  }}
+ />
+</SharedThemeProvider>