@@ -165,13 +136,13 @@ const customCode = `
`;
export default {
- title: 'Components/Table/Variants/With Header',
+ title: 'Components/Table/Pagination/Basic Pagination',
component: Table,
parameters: {
docs: {
docPage: {
customCode,
- title: 'Standard Table',
+ title: 'Basic Pagination in Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx b/core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx
similarity index 77%
rename from core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx
rename to core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx
index 8069fee79d..a7711c0ff8 100644
--- a/core/components/organisms/table/__stories__/variants/withErrorTemplate.story.jsx
+++ b/core/components/organisms/table/__stories__/pagination/jumpPagination.story.jsx
@@ -1,15 +1,15 @@
import * as React from 'react';
import { Card, Table } from '@/index';
-import { errorTemplate } from '@/components/organisms/grid/__stories__/_common_/errorTemplate';
+import data from '@/components/organisms/grid/__stories__/_common_/data';
import schema from '@/components/organisms/grid/__stories__/_common_/schema';
import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
// CSF format story
-export const withErrorTemplate = () => {
+export const jumpPagination = () => {
return (
-
+
);
@@ -17,11 +17,12 @@ export const withErrorTemplate = () => {
const customCode = `
() => {
+ const data = ${JSON.stringify(data, null, 4)};
+
const schema = [
{
name: 'name',
displayName: 'Name',
- width: 300,
resizable: true,
separator: true,
tooltip: true,
@@ -59,7 +60,6 @@ const customCode = `
width: 350,
resizable: true,
sorting: false,
- cellType: 'WITH_META_LIST'
},
{
name: 'gender',
@@ -90,6 +90,7 @@ const customCode = `
resizable: true,
align: 'center',
cellType: 'ICON',
+ sorting: false,
translate: _ => ({
icon: 'events'
})
@@ -99,36 +100,34 @@ const customCode = `
displayName: 'Custom Cell',
width: 200,
resizable: true,
- separator: true,
- cellRenderer: (props) => {
- const {
- loading
- } = props;
-
- if (loading) return <>;
-
+ cellType: 'WITH_META_LIST',
+ sorting: false,
+ cellRenderer: props => {
return (
-
Button
+ <>
+
+
+
);
}
},
];
- const errorTemplate = () => {
- return (
-
We failed as a team
- );
- };
-
return (
-
+
@@ -137,12 +136,13 @@ const customCode = `
`;
export default {
- title: 'Components/Table/Variants/With Error Template',
+ title: 'Components/Table/Pagination/Jump Pagination',
component: Table,
parameters: {
docs: {
docPage: {
customCode,
+ title: 'Jump Pagination in Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx b/core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx
similarity index 78%
rename from core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx
rename to core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx
index 1e4c75afdf..d1368af5e4 100644
--- a/core/components/organisms/table/__stories__/variants/withEditableCell.story.jsx
+++ b/core/components/organisms/table/__stories__/pagination/withoutPagination.story.jsx
@@ -1,21 +1,25 @@
import * as React from 'react';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
import data from '@/components/organisms/grid/__stories__/_common_/data';
-import editableSchema from '@/components/organisms/grid/__stories__/_common_/editableSchema';
+import schema from '@/components/organisms/grid/__stories__/_common_/schema';
import { Card, Table } from '@/index';
import { AsyncTable, SyncTable } from '../_common_/types';
import { action } from '@/utils/action';
-export const withEditableCell = () => {
+export const withoutPagination = () => {
return (
{
+ return data[index % 10];
+ })}
+ schema={schema}
withHeader={true}
withCheckbox={true}
+ withPagination={false}
+ uniqueColumnName="email"
onSelect={(rowIndex, selected, selectedList, selectAll) =>
action(
`on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
@@ -25,6 +29,7 @@ export const withEditableCell = () => {
}
headerOptions={{
withSearch: true,
+ allowSelectAll: true,
}}
onSearch={(currData, searchTerm) => {
return currData.filter(
@@ -33,8 +38,6 @@ export const withEditableCell = () => {
d.lastName.toLowerCase().match(searchTerm.toLowerCase())
);
}}
- withPagination={true}
- pageSize={5}
onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
/>
@@ -42,9 +45,14 @@ export const withEditableCell = () => {
);
};
-const customCode = `
-() => {
- const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+const customCode = `() => {
+ const data = ${JSON.stringify(
+ [...Array(100)].map((_, index) => {
+ return data[index % 10];
+ }),
+ null,
+ 4
+ )};
const schema = [
{
@@ -129,49 +137,44 @@ const customCode = `
displayName: 'Custom Cell',
width: 200,
resizable: true,
- separator: true,
+ cellType: 'WITH_META_LIST',
sorting: false,
- cellRenderer: (props) => {
- const { loading } = props;
-
- if (loading) return (
-
+
{
+ console.log('onsearch called', searchTerm);
+ setError(!error);
return currData.filter(d =>
d.firstName.toLowerCase().match(searchTerm.toLowerCase())
|| d.lastName.toLowerCase().match(searchTerm.toLowerCase())
@@ -179,8 +182,6 @@ const customCode = `
}}
withCheckbox={true}
onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)}
- withPagination={true}
- pageSize={5}
onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
/>
@@ -190,12 +191,13 @@ const customCode = `
`;
export default {
- title: 'Components/Table/Variants/With Editable Cell',
+ title: 'Components/Table/Pagination/Without Pagination',
component: Table,
parameters: {
docs: {
docPage: {
customCode,
+ title: 'Table without Pagination',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx b/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx
new file mode 100644
index 0000000000..b1866a0c62
--- /dev/null
+++ b/core/components/organisms/table/__stories__/selection/BulkAction.story.jsx
@@ -0,0 +1,346 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import data from '@/components/organisms/grid/__stories__/_common_/data';
+import { Card, Table, Button } from '@/index';
+import { AsyncTable, SyncTable } from '../_common_/types';
+import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData';
+import { action } from '@/utils/action';
+
+export const withBulkActions = () => {
+ const selectionActionRenderer = (selectedData, selectAll) => {
+ action('selectedData', selectedData, 'selectAll', selectAll)();
+ return (
+
+
+ Delete
+
+ Export
+
+ );
+ };
+
+ const onDataExport = (data) => {
+ action('Exporting data', data)();
+ };
+
+ const globalActionTrigger = (data) => {
+ return onDataExport(data)}>Export ;
+ };
+
+ return (
+
+
+
+ action(
+ `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+ selectedList
+ )} selectAll: ${selectAll}`
+ )()
+ }
+ headerOptions={{
+ withSearch: true,
+ allowSelectAll: true,
+ selectionActionRenderer,
+ customSelectionLabel: 'user',
+ globalActionRenderer: globalActionTrigger,
+ }}
+ withPagination={true}
+ pageSize={5}
+ onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
+ />
+
+
+ );
+};
+
+const customCode = `
+() => {
+ const translateData = (schema, data) => {
+ let newData = data;
+
+ if (schema.translate) {
+ const translatedData = schema.translate(data);
+ newData = {
+ ...newData,
+ [schema.name]: typeof translatedData === 'object' ? {
+ ...newData[schema.name],
+ ...translatedData
+ } : translatedData
+ };
+ }
+ if (typeof newData[schema.name] !== 'object') newData[schema.name] = { title: newData[schema.name] };
+
+ return newData;
+ }
+
+ const filterData = (schema, data, filterList) => {
+ let filteredData = data;
+ if (filterList) {
+ Object.keys(filterList).forEach(schemaName => {
+ const filters = filterList[schemaName];
+ const sIndex = schema.findIndex(s => s.name === schemaName);
+ const { onFilterChange } = schema[sIndex];
+ if (filters.length && onFilterChange) {
+ filteredData = filteredData.filter(d => onFilterChange(d, filters));
+ }
+ });
+ }
+
+ return filteredData;
+ };
+
+ const sortData = (schema, data, sortingList) => {
+ const sortedData = [...data];
+ sortingList.forEach(l => {
+ const sIndex = schema.findIndex(s => s.name === l.name);
+ if (sIndex !== -1) {
+ const defaultComparator = (a, b) => {
+ const aData = translateData(schema[sIndex], a);
+ const bData = translateData(schema[sIndex], b);
+ return aData[l.name].title.localeCompare(bData[l.name].title);
+ };
+
+ const {
+ comparator = defaultComparator
+ } = schema[sIndex];
+
+ sortedData.sort(comparator);
+ if (l.type === 'desc') sortedData.reverse();
+ }
+ });
+
+ return sortedData;
+ };
+
+ const paginateData = (data, page, pageSize) => {
+ const start = (page - 1) * pageSize;
+ const end = start + pageSize;
+ const paginatedData = data.slice(start, end);
+ return paginatedData;
+ };
+
+ const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+ const [formattedData, setFormattedData] = React.useState(data);
+
+ const schema = [
+ {
+ name: 'name',
+ displayName: 'Name',
+ width: 300,
+ resizable: true,
+ separator: true,
+ tooltip: true,
+ translate: a => ({
+ title: \`\${a.firstName} \${a.lastName}\`,
+ firstName: a.firstName,
+ lastName: a.lastName
+ }),
+ filters: [
+ { label: 'A-G', value: 'a-g' },
+ { label: 'H-R', value: 'h-r' },
+ { label: 'S-Z', value: 's-z' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ switch (filter) {
+ case 'a-g':
+ if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+ break;
+ case 'h-r':
+ if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+ break;
+ case 's-z':
+ if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+ break;
+ }
+ }
+ return false;
+ },
+ cellType: 'AVATAR_WITH_TEXT',
+ },
+ {
+ name: 'email',
+ displayName: 'Email',
+ width: 350,
+ resizable: true,
+ sorting: false,
+ cellType: 'WITH_META_LIST'
+ },
+ {
+ name: 'gender',
+ displayName: 'Gender',
+ width: 200,
+ resizable: true,
+ comparator: (a, b) => a.gender.localeCompare(b.gender),
+ cellType: 'STATUS_HINT',
+ translate: a => ({
+ title: a.gender,
+ statusAppearance: (a.gender === 'Female') ? 'alert' : 'success'
+ }),
+ filters: [
+ { label: 'Male', value: 'male' },
+ { label: 'Female', value: 'female' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ if (a.gender.toLowerCase() === filter) return true;
+ }
+ return false;
+ },
+ },
+ {
+ name: 'icon',
+ displayName: 'Icon',
+ width: 100,
+ resizable: true,
+ align: 'center',
+ cellType: 'ICON',
+ sorting: false,
+ translate: _ => ({
+ icon: 'events'
+ })
+ },
+ {
+ name: 'customCell',
+ displayName: 'Custom Cell',
+ width: 200,
+ resizable: true,
+ cellType: 'WITH_META_LIST',
+ sorting: false,
+ cellRenderer: props => {
+ return (
+ <>
+ onDataExport(data)}>Export );
+ }
+
+ const selectionActionRenderer = (selectedData, selectAll) => {
+ console.log('selectedData in output', selectedData, 'selectAll', selectAll);
+ return (
+
+ Delete
+ Export
+
+ )
+ }
+
+ return (
+
+
+ console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)}
+ withPagination={true}
+ pageSize={5}
+ onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+ />
+
+
+ );
+};
+`;
+
+export default {
+ title: 'Components/Table/Selection/With Bulk Actions',
+ component: Table,
+ parameters: {
+ docs: {
+ docPage: {
+ customCode,
+ title: 'Table with Bulk Actions',
+ props: {
+ components: { AsyncTable, SyncTable },
+ exclude: ['showHead'],
+ },
+ },
+ },
+ },
+};
diff --git a/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx b/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx
new file mode 100644
index 0000000000..778b71ebda
--- /dev/null
+++ b/core/components/organisms/table/__stories__/selection/BulkActionWithSpaceConstraint.story.jsx
@@ -0,0 +1,344 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import data from '@/components/organisms/grid/__stories__/_common_/data';
+import { Card, Table, Button } from '@/index';
+import { AsyncTable, SyncTable } from '../_common_/types';
+import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData';
+import { action } from '@/utils/action';
+
+export const withBulkActionsAndSpaceConstraint = () => {
+ const selectionActionRenderer = (selectedData, selectAll) => {
+ action('selectedData', selectedData, 'selectAll', selectAll)();
+ return (
+
+
+ );
+ };
+
+ const onDataExport = (data) => {
+ action('Exporting data', data)();
+ };
+
+ const globalActionTrigger = (data) => {
+ return onDataExport(data)}>Export ;
+ };
+
+ return (
+
+
+
+ action(
+ `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+ selectedList
+ )} selectAll: ${selectAll}`
+ )()
+ }
+ headerOptions={{
+ withSearch: true,
+ allowSelectAll: true,
+ selectionActionRenderer,
+ customSelectionLabel: 'user',
+ globalActionRenderer: globalActionTrigger,
+ }}
+ withPagination={true}
+ pageSize={5}
+ onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
+ />
+
+
+ );
+};
+
+const customCode = `
+() => {
+ const translateData = (schema, data) => {
+ let newData = data;
+
+ if (schema.translate) {
+ const translatedData = schema.translate(data);
+ newData = {
+ ...newData,
+ [schema.name]: typeof translatedData === 'object' ? {
+ ...newData[schema.name],
+ ...translatedData
+ } : translatedData
+ };
+ }
+ if (typeof newData[schema.name] !== 'object') newData[schema.name] = { title: newData[schema.name] };
+
+ return newData;
+ }
+
+ const filterData = (schema, data, filterList) => {
+ let filteredData = data;
+ if (filterList) {
+ Object.keys(filterList).forEach(schemaName => {
+ const filters = filterList[schemaName];
+ const sIndex = schema.findIndex(s => s.name === schemaName);
+ const { onFilterChange } = schema[sIndex];
+ if (filters.length && onFilterChange) {
+ filteredData = filteredData.filter(d => onFilterChange(d, filters));
+ }
+ });
+ }
+
+ return filteredData;
+ };
+
+ const sortData = (schema, data, sortingList) => {
+ const sortedData = [...data];
+ sortingList.forEach(l => {
+ const sIndex = schema.findIndex(s => s.name === l.name);
+ if (sIndex !== -1) {
+ const defaultComparator = (a, b) => {
+ const aData = translateData(schema[sIndex], a);
+ const bData = translateData(schema[sIndex], b);
+ return aData[l.name].title.localeCompare(bData[l.name].title);
+ };
+
+ const {
+ comparator = defaultComparator
+ } = schema[sIndex];
+
+ sortedData.sort(comparator);
+ if (l.type === 'desc') sortedData.reverse();
+ }
+ });
+
+ return sortedData;
+ };
+
+ const paginateData = (data, page, pageSize) => {
+ const start = (page - 1) * pageSize;
+ const end = start + pageSize;
+ const paginatedData = data.slice(start, end);
+ return paginatedData;
+ };
+
+ const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+ const [formattedData, setFormattedData] = React.useState(data);
+
+ const schema = [
+ {
+ name: 'name',
+ displayName: 'Name',
+ width: 300,
+ resizable: true,
+ separator: true,
+ tooltip: true,
+ translate: a => ({
+ title: \`\${a.firstName} \${a.lastName}\`,
+ firstName: a.firstName,
+ lastName: a.lastName
+ }),
+ filters: [
+ { label: 'A-G', value: 'a-g' },
+ { label: 'H-R', value: 'h-r' },
+ { label: 'S-Z', value: 's-z' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ switch (filter) {
+ case 'a-g':
+ if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+ break;
+ case 'h-r':
+ if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+ break;
+ case 's-z':
+ if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+ break;
+ }
+ }
+ return false;
+ },
+ cellType: 'AVATAR_WITH_TEXT',
+ },
+ {
+ name: 'email',
+ displayName: 'Email',
+ width: 350,
+ resizable: true,
+ sorting: false,
+ cellType: 'WITH_META_LIST'
+ },
+ {
+ name: 'gender',
+ displayName: 'Gender',
+ width: 200,
+ resizable: true,
+ comparator: (a, b) => a.gender.localeCompare(b.gender),
+ cellType: 'STATUS_HINT',
+ translate: a => ({
+ title: a.gender,
+ statusAppearance: (a.gender === 'Female') ? 'alert' : 'success'
+ }),
+ filters: [
+ { label: 'Male', value: 'male' },
+ { label: 'Female', value: 'female' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ if (a.gender.toLowerCase() === filter) return true;
+ }
+ return false;
+ },
+ },
+ {
+ name: 'icon',
+ displayName: 'Icon',
+ width: 100,
+ resizable: true,
+ align: 'center',
+ cellType: 'ICON',
+ sorting: false,
+ translate: _ => ({
+ icon: 'events'
+ })
+ },
+ {
+ name: 'customCell',
+ displayName: 'Custom Cell',
+ width: 200,
+ resizable: true,
+ cellType: 'WITH_META_LIST',
+ sorting: false,
+ cellRenderer: props => {
+ return (
+ <>
+ onDataExport(data)}>Export );
+ }
+
+ const selectionActionRenderer = (selectedData, selectAll) => {
+ console.log('selectedData in output', selectedData, 'selectAll', selectAll);
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)}
+ withPagination={true}
+ pageSize={5}
+ onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+ />
+
+
+ );
+};
+`;
+
+export default {
+ title: 'Components/Table/Selection/With Bulk Actions And Space Constraint',
+ component: Table,
+ parameters: {
+ docs: {
+ docPage: {
+ customCode,
+ title: 'Table with Bulk Actions and Space Constraint',
+ props: {
+ components: { AsyncTable, SyncTable },
+ exclude: ['showHead'],
+ },
+ },
+ },
+ },
+};
diff --git a/core/components/organisms/table/__stories__/SelectAllRows.story.jsx b/core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx
similarity index 91%
rename from core/components/organisms/table/__stories__/SelectAllRows.story.jsx
rename to core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx
index 2d24390742..a1709293e4 100644
--- a/core/components/organisms/table/__stories__/SelectAllRows.story.jsx
+++ b/core/components/organisms/table/__stories__/selection/SelectionBehavior.story.jsx
@@ -2,11 +2,11 @@ import * as React from 'react';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
import data from '@/components/organisms/grid/__stories__/_common_/data';
import { Card, Table } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import { fetchData } from '@/components/organisms/grid/__stories__/_common_/fetchData';
import { action } from '@/utils/action';
-export const selectAllRows = () => {
+export const selectionBehavior = () => {
return (
@@ -15,6 +15,7 @@ export const selectAllRows = () => {
fetchData={fetchData}
withHeader={true}
withCheckbox={true}
+ uniqueColumnName="email"
onSelect={(rowIndex, selected, selectedList, selectAll) =>
action(
`on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
@@ -103,6 +104,7 @@ const customCode = `
};
const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+ const [formattedData, setFormattedData] = React.useState(data);
const schema = [
{
@@ -227,6 +229,7 @@ const customCode = `
const filteredData = filterData(schema, data, filterList);
const searchedData = filteredData.filter(d => onSearch(d, searchTerm));
const sortedData = sortData(schema, searchedData, sortingList);
+ setFormattedData(sortedData);
if (page && pageSize) {
return new Promise(resolve => {
@@ -265,10 +268,11 @@ const customCode = `
loaderSchema={loaderSchema}
fetchData={fetchData}
withHeader={true}
+ uniqueColumnName="firstName"
headerOptions={{
withSearch: true,
- allowSelectAll: true,
customSelectionLabel: 'user',
+ allowSelectAll: true,
}}
withCheckbox={true}
onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select: - rowIndex: \${ rowIndex } selected: \${ selected } selectedList: \${ JSON.stringify(selectedList) } selectAll: \${ selectAll } \`)}
@@ -282,31 +286,14 @@ const customCode = `
};
`;
-const description = `
- ### Note:
- 1. Use **allowSelectAll** in headerOptions to select **All** the rows of the table.
-
- headerOptions={{
- allowSelectAll: true,
- }}
-
- 2. Use **customSelectionLabel** in headerOptions to show custom label string in header on row selection.items on this page")*
-
- headerOptions={{
- customSelectionLabel: 'user',
- }}
-
-`;
-
export default {
- title: 'Components/Table/Select All Rows',
+ title: 'Components/Table/Selection/Selection Behavior',
component: Table,
parameters: {
docs: {
docPage: {
customCode,
- description,
+ title: 'Selection Behavior in Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/CompressedTable.story.jsx b/core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx
similarity index 98%
rename from core/components/organisms/table/__stories__/CompressedTable.story.jsx
rename to core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx
index 7bff612aeb..dcfbeed6f1 100644
--- a/core/components/organisms/table/__stories__/CompressedTable.story.jsx
+++ b/core/components/organisms/table/__stories__/sizes/CompressedTable.story.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Card, Table, Button } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import { action } from '@/utils/action';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
@@ -240,7 +240,7 @@ const customCode = `() => {
}`;
export default {
- title: 'Components/Table/Compressed Table',
+ title: 'Components/Table/Sizes/Compressed Table',
component: Table,
parameters: {
docs: {
diff --git a/core/components/organisms/table/__stories__/StandardTable.story.jsx b/core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx
similarity index 97%
rename from core/components/organisms/table/__stories__/StandardTable.story.jsx
rename to core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx
index 7a1ffd74b7..dbdc881273 100644
--- a/core/components/organisms/table/__stories__/StandardTable.story.jsx
+++ b/core/components/organisms/table/__stories__/sizes/StandardTable.story.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Card, Table } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
export const standardTable = () => {
@@ -201,7 +201,7 @@ const customCode = `() => {
}`;
export default {
- title: 'Components/Table/Standard Table',
+ title: 'Components/Table/Sizes/Standard Table',
component: Table,
parameters: {
docs: {
diff --git a/core/components/organisms/table/__stories__/TightStory.story.jsx b/core/components/organisms/table/__stories__/sizes/TightStory.story.jsx
similarity index 97%
rename from core/components/organisms/table/__stories__/TightStory.story.jsx
rename to core/components/organisms/table/__stories__/sizes/TightStory.story.jsx
index 3a36eab4e0..fe2d85905d 100644
--- a/core/components/organisms/table/__stories__/TightStory.story.jsx
+++ b/core/components/organisms/table/__stories__/sizes/TightStory.story.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Card, Table } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
export const tightTable = () => {
@@ -203,7 +203,7 @@ const customCode = `() => {
}`;
export default {
- title: 'Components/Table/Tight Table',
+ title: 'Components/Table/Sizes/Tight Table',
component: Table,
parameters: {
docs: {
diff --git a/core/components/organisms/table/__stories__/states/DataTable.story.jsx b/core/components/organisms/table/__stories__/states/DataTable.story.jsx
new file mode 100644
index 0000000000..0b92b0cac1
--- /dev/null
+++ b/core/components/organisms/table/__stories__/states/DataTable.story.jsx
@@ -0,0 +1,431 @@
+import * as React from 'react';
+import { Card, Table } from '@/index';
+import { AsyncTable, SyncTable } from '../_common_/types';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+
+export const dataTable = () => {
+ const data = [
+ {
+ claim_id: 'Q10000101',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '03/27/2020',
+ last_dos: '03/30/2020',
+ firstName: 'Brooke',
+ lastName: 'Heeran',
+ disabled: true,
+ },
+ {
+ claim_id: 'Q10000102',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 1',
+ insurance_name: 'Medicare',
+ first_dos: '03/24/2020',
+ last_dos: '04/30/2020',
+ firstName: 'Frazer',
+ lastName: 'Cathro',
+ },
+ {
+ claim_id: 'Q10000103',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '05/16/2020',
+ last_dos: '05/30/2020',
+ firstName: 'Lemmie',
+ lastName: 'Ciric',
+ disabled: true,
+ },
+ {
+ claim_id: 'Q10000104',
+ claim_type: 'Institutional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '12/27/2020',
+ last_dos: '12/30/2020',
+ firstName: 'Randy',
+ lastName: 'Boatwright',
+ },
+ {
+ claim_id: 'Q10000105',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '05/04/2020',
+ last_dos: '05/28/2020',
+ firstName: 'Rolando',
+ lastName: 'Cyples',
+ },
+ {
+ claim_id: 'Q10000106',
+ claim_type: 'Institutional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '01/27/2020',
+ last_dos: '03/30/2020',
+ firstName: 'Lem',
+ lastName: 'Males',
+ },
+ {
+ claim_id: 'Q10000107',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '03/30/2020',
+ last_dos: '04/30/2020',
+ firstName: 'Sayres',
+ lastName: 'Adelberg',
+ },
+ {
+ claim_id: 'Q10000108',
+ claim_type: 'Professional',
+ plan_name: 'MSSP Track 3',
+ insurance_name: 'Medicare',
+ first_dos: '02/27/2020',
+ last_dos: '03/30/2020',
+ firstName: 'Murray',
+ lastName: 'Bravington',
+ },
+ {
+ claim_id: 'Q10000109',
+ claim_type: 'Institutional',
+ plan_name: 'MSSP Track 5',
+ insurance_name: 'Medicare',
+ first_dos: '03/17/2020',
+ last_dos: '03/30/2020',
+ firstName: 'Carin',
+ lastName: 'Robiou',
+ },
+ {
+ claim_id: 'Q100001010',
+ claim_type: 'Institutional',
+ plan_name: 'MSSP Track 6',
+ insurance_name: 'Medicare',
+ first_dos: '09/27/2020',
+ last_dos: '12/27/2020',
+ firstName: 'Brina',
+ lastName: 'Pirie',
+ },
+ ];
+
+ const schema = [
+ {
+ name: 'claim_id',
+ displayName: 'Claim Id',
+ width: '12%',
+ separator: true,
+ },
+ {
+ name: 'claim_type',
+ displayName: 'Claim Type',
+ width: '15%',
+ separator: true,
+ cellType: 'DEFAULT',
+ },
+ {
+ name: 'insurance_name',
+ displayName: 'Insurance Name',
+ width: '15%',
+ separator: true,
+ },
+ {
+ name: 'plan_name',
+ displayName: 'Plan Name',
+ width: '15%',
+ separator: true,
+ },
+ {
+ name: 'first_dos',
+ displayName: 'First Date of Service',
+ width: '18%',
+ separator: true,
+ },
+ {
+ name: 'last_dos',
+ displayName: 'Last Date of Service',
+ width: '18%',
+ separator: true,
+ },
+ {
+ name: 'provider_name',
+ displayName: 'Provider Name',
+ separator: true,
+ filters: [
+ { label: 'A-G', value: 'a-g' },
+ { label: 'H-R', value: 'h-r' },
+ { label: 'S-Z', value: 's-z' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ switch (filter) {
+ case 'a-g':
+ if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+ break;
+ case 'h-r':
+ if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+ break;
+ case 's-z':
+ if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+ break;
+ }
+ }
+ return false;
+ },
+ translate: (a) => ({
+ title: `${a.firstName} ${a.lastName}`,
+ firstName: a.firstName,
+ lastName: a.lastName,
+ }),
+ },
+ ];
+
+ return (
+
+ {
+ return currData.filter(
+ (d) =>
+ d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
+ d.lastName.toLowerCase().match(searchTerm.toLowerCase()) ||
+ d.claim_id.toLowerCase().match(searchTerm.toLowerCase())
+ );
+ }}
+ withPagination={true}
+ pageSize={5}
+ />
+
+ );
+};
+
+const customCode = `() => {
+ const data = [
+ {
+ claim_id: 'Q10000101',
+ claim_type: 'Professional',
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "03/27/2020",
+ last_dos: "03/30/2020",
+ firstName: 'Brooke',
+ lastName: 'Heeran',
+ disabled: true,
+ },
+ {
+ claim_id: 'Q10000102',
+ claim_type: "Professional",
+ plan_name: "MSSP Track 1",
+ insurance_name: "Medicare",
+ first_dos: "03/24/2020",
+ last_dos: "04/30/2020",
+ firstName: 'Frazer',
+ lastName: 'Cathro',
+ },
+ {
+ claim_id: 'Q10000103',
+ claim_type: "Professional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "05/16/2020",
+ last_dos: "05/30/2020",
+ firstName: 'Lemmie',
+ lastName: 'Ciric',
+ disabled: true,
+ },
+ {
+ claim_id: 'Q10000104',
+ claim_type: "Institutional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "12/27/2020",
+ last_dos: "12/30/2020",
+ firstName: 'Randy',
+ lastName: 'Boatwright',
+ },
+ {
+ claim_id: 'Q10000105',
+ claim_type: "Professional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "05/04/2020",
+ last_dos: "05/28/2020",
+ firstName: 'Rolando',
+ lastName: 'Cyples',
+ },
+ {
+ claim_id: 'Q10000106',
+ claim_type: "Institutional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "01/27/2020",
+ last_dos: "03/30/2020",
+ firstName: 'Lem',
+ lastName: 'Males',
+ },
+ {
+ claim_id: 'Q10000107',
+ claim_type: "Professional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "03/30/2020",
+ last_dos: "04/30/2020",
+ firstName: 'Sayres',
+ lastName: 'Adelberg',
+ },
+ {
+ claim_id: 'Q10000108',
+ claim_type: "Professional",
+ plan_name: "MSSP Track 3",
+ insurance_name: "Medicare",
+ first_dos: "02/27/2020",
+ last_dos: "03/30/2020",
+ firstName: 'Murray',
+ lastName: 'Bravington',
+ },
+ {
+ claim_id: 'Q10000109',
+ claim_type: "Institutional",
+ plan_name: "MSSP Track 5",
+ insurance_name: "Medicare",
+ first_dos: "03/17/2020",
+ last_dos: "03/30/2020",
+ firstName: 'Carin',
+ lastName: 'Robiou',
+ },
+ {
+ claim_id: 'Q100001010',
+ claim_type: "Institutional",
+ plan_name: "MSSP Track 6",
+ insurance_name: "Medicare",
+ first_dos: "09/27/2020",
+ last_dos: "12/27/2020",
+ firstName: 'Brina',
+ lastName: 'Pirie',
+ }
+ ];
+
+ const schema = [
+ {
+ name: 'claim_id',
+ displayName: 'Claim Id',
+ width: '12%',
+ separator: true,
+ },
+ {
+ name: 'claim_type',
+ displayName: 'Claim Type',
+ width: '15%',
+ separator: true,
+ cellType: "DEFAULT"
+ },
+ {
+ name: 'insurance_name',
+ displayName: 'Insurance Name',
+ width: '15%',
+ separator: true,
+ },
+ {
+ name: 'plan_name',
+ displayName: 'Plan Name',
+ width: '15%',
+ separator: true,
+ },
+ {
+ name: 'first_dos',
+ displayName: 'First Date of Service',
+ width: '18%',
+ separator: true,
+ },
+ {
+ name: 'last_dos',
+ displayName: 'Last Date of Service',
+ width: '18%',
+ separator: true,
+ },
+ {
+ name: 'provider_name',
+ displayName: 'Provider Name',
+ separator: true,
+ filters: [
+ { label: 'A-G', value: 'a-g' },
+ { label: 'H-R', value: 'h-r' },
+ { label: 'S-Z', value: 's-z' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ switch (filter) {
+ case 'a-g':
+ if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+ break;
+ case 'h-r':
+ if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+ break;
+ case 's-z':
+ if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+ break;
+ }
+ }
+ return false;
+ },
+ translate: (a) => ({
+ title: \`\${a.firstName} \${a.lastName}\`,
+ firstName: a.firstName,
+ lastName: a.lastName
+ }),
+ },
+ ];
+
+ const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)};
+
+ return (
+
+ {
+ return currData.filter(d =>
+ d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+ || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+ || d.claim_id.toLowerCase().match(searchTerm.toLowerCase())
+ );
+ }}
+ withPagination={true}
+ pageSize={5}
+ onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+ />
+
+ );
+}`;
+
+export default {
+ title: 'Components/Table/States/Data Table',
+ component: Table,
+ parameters: {
+ docs: {
+ docPage: {
+ customCode,
+ title: 'States in Data table',
+ props: {
+ components: { AsyncTable, SyncTable },
+ exclude: ['showHead'],
+ },
+ },
+ },
+ },
+};
diff --git a/core/components/organisms/table/__stories__/DisabledRow.story.jsx b/core/components/organisms/table/__stories__/states/DisabledRow.story.jsx
similarity index 98%
rename from core/components/organisms/table/__stories__/DisabledRow.story.jsx
rename to core/components/organisms/table/__stories__/states/DisabledRow.story.jsx
index dbe986ba9b..aadc1c67da 100644
--- a/core/components/organisms/table/__stories__/DisabledRow.story.jsx
+++ b/core/components/organisms/table/__stories__/states/DisabledRow.story.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Card, Table } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
import { action } from '@/utils/action';
@@ -281,7 +281,7 @@ const customCode = `() => {
}`;
export default {
- title: 'Components/Table/Disabled Row',
+ title: 'Components/Table/States/Disabled Row',
component: Table,
parameters: {
docs: {
diff --git a/core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx b/core/components/organisms/table/__stories__/states/LoadingState.story.jsx
similarity index 61%
rename from core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx
rename to core/components/organisms/table/__stories__/states/LoadingState.story.jsx
index 4e3708388f..c9bfcc1314 100644
--- a/core/components/organisms/table/__stories__/variants/syncLoaderSchema.story.jsx
+++ b/core/components/organisms/table/__stories__/states/LoadingState.story.jsx
@@ -1,36 +1,23 @@
import * as React from 'react';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
-import schema from '@/components/organisms/grid/__stories__/_common_/schema';
-import data from '@/components/organisms/grid/__stories__/_common_/data';
import { Card, Table } from '@/index';
import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
-export const syncLoaderSchema = () => {
+export const loadingState = () => {
const loading = true;
-
- const error = false;
-
const pageSize = 5;
-
const withCheckbox = true;
- const applyLoaderSchema = true;
-
- const applySchema = false;
-
- const applyData = false;
-
return (
-
+
{
};
export default {
- title: 'Components/Table/Variants/Sync Loader Schema',
+ title: 'Components/Table/States/Loading State',
component: Table,
parameters: {
docs: {
docPage: {
+ title: 'Loading State in Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx b/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx
new file mode 100644
index 0000000000..f8642fdda8
--- /dev/null
+++ b/core/components/organisms/table/__stories__/states/ResourceTable.story.jsx
@@ -0,0 +1,328 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import { Card, Table, Menu, Avatar, Text } from '@/index';
+import { AsyncTable, SyncTable } from '../_common_/types';
+import { action } from '@/utils/action';
+
+const data = [
+ {
+ name: 'Asthma Outreach',
+ firstName: 'Brooke',
+ lastName: 'Heeran',
+ status: 'In Progress',
+ lastUpdated: 'June 20, 2020',
+ recipients: 11846,
+ _selected: true,
+ },
+ {
+ firstName: 'Frazer',
+ lastName: 'Cathro',
+ status: 'Scheduled',
+ lastUpdated: 'June 19, 2020',
+ name: 'HbA1c Test due',
+ recipients: 12846,
+ },
+ {
+ firstName: 'Lemmie',
+ name: 'ER Education',
+ lastName: 'Ciric',
+ status: 'Draft',
+ lastUpdated: 'May 19, 2020',
+ recipients: 118467,
+ _selected: true,
+ },
+ {
+ firstName: 'Randy',
+ lastName: 'Boatwright',
+ name: 'Flu Vaccination',
+ status: 'Failed',
+ lastUpdated: 'March 19, 2020',
+ recipients: 10846,
+ },
+ {
+ firstName: 'Rolando',
+ lastName: 'Cyples',
+ name: 'Well-child Visit',
+ status: 'In Progress',
+ lastUpdated: 'April 19, 2020',
+ recipients: 11847,
+ },
+ {
+ firstName: 'Lem',
+ lastName: 'Males',
+ name: 'Annual wellness Visit',
+ status: 'In Progress',
+ lastUpdated: 'June 16, 2020',
+ recipients: 118100,
+ },
+ {
+ firstName: 'Sayres',
+ lastName: 'Adelberg',
+ name: 'Flu Vaccination',
+ status: 'Draft',
+ lastUpdated: 'Dec 19, 2020',
+ recipients: 11848,
+ },
+ {
+ firstName: 'Murray',
+ lastName: 'Bravington',
+ name: 'Well-child Visit',
+ status: 'Draft',
+ lastUpdated: 'April 19, 2020',
+ recipients: 11890,
+ },
+];
+
+export const resourceTable = () => {
+ const statusAppearance = {
+ 'In Progress': 'info',
+ Scheduled: 'warning',
+ Draft: 'default',
+ Failed: 'alert',
+ };
+
+ const schema = [
+ {
+ name: 'name',
+ displayName: 'Name',
+ width: '30%',
+ cellType: 'WITH_META_LIST',
+ translate: (a) => ({
+ title: a.name,
+ metaList: [`${a.recipients} recipients`],
+ }),
+ sorting: false,
+ },
+ {
+ name: 'status',
+ displayName: 'Status',
+ width: '20%',
+ cellType: 'STATUS_HINT',
+ sorting: false,
+ filters: [
+ { label: 'In Progress', value: 'In Progress' },
+ { label: 'Scheduled', value: 'Scheduled' },
+ { label: 'Draft', value: 'Draft' },
+ { label: 'Failed', value: 'Failed' },
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ if (a.status === filter) return true;
+ }
+ return false;
+ },
+ translate: (a) => {
+ const status = a.status;
+ return {
+ title: status,
+ statusAppearance: statusAppearance[status],
+ };
+ },
+ },
+ {
+ name: 'lastUpdated',
+ displayName: 'Last Updated on',
+ width: '30%',
+ sorting: false,
+ },
+ {
+ name: 'user',
+ displayName: '',
+ sorting: false,
+ width: '20%',
+ cellRenderer: (props) => (
+
+
+
+
+
+ Edit
+
+
+ Delete
+
+
+
+
+
+
+ action(
+ `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+ selectedList
+ )} selectAll: ${selectAll}`
+ )()
+ }
+ headerOptions={{
+ withSearch: true,
+ }}
+ onSearch={(currData, searchTerm) => {
+ return currData.filter(
+ (d) =>
+ d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
+ d.lastName.toLowerCase().match(searchTerm.toLowerCase()) ||
+ d.name.toLowerCase().match(searchTerm.toLowerCase())
+ );
+ }}
+ withPagination={true}
+ paginationType="basic"
+ pageSize={4}
+ onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
+ />
+
+ );
+};
+
+const customCode = `
+() => {
+ const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+
+ const statusAppearance = {
+ 'In Progress': 'info',
+ 'Scheduled': 'warning',
+ 'Draft': 'default',
+ 'Failed': 'alert'
+ };
+
+ const schema = [
+ {
+ name: 'name',
+ displayName: 'Name',
+ width: '30%',
+ cellType: 'WITH_META_LIST',
+ sorting: false,
+ translate: a => ({
+ title: a.name,
+ metaList: [\`\${a.recipients} recipients\`]
+ }),
+ },
+ {
+ name: 'status',
+ displayName: 'Status',
+ width: '20%',
+ cellType: 'STATUS_HINT',
+ sorting: false,
+ filters: [
+ { label: 'In Progress', value: 'In Progress' },
+ { label: 'Scheduled', value: 'Scheduled' },
+ { label: 'Draft', value: 'Draft' },
+ { label: 'Failed', value: 'Failed' }
+ ],
+ onFilterChange: (a, filters) => {
+ for (const filter of filters) {
+ if (a.status === filter) return true;
+ }
+ return false;
+ },
+ translate: a => {
+ const status = a.status;
+ return ({
+ title: status,
+ statusAppearance: statusAppearance[status]
+ });
+ }
+ },
+ {
+ name: 'lastUpdated',
+ displayName: 'Last Updated on',
+ width: '30%',
+ sorting: false,
+ },
+ {
+ name: 'user',
+ displayName: '',
+ sorting: false,
+ width: '20%',
+ cellRenderer: (props) => {
+ const { data } = props;
+ return (
+
+
+
+
+
+ Edit
+
+
+ Delete
+
+
+
+
+
+
+ console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)
+ }
+ headerOptions={{
+ withSearch: true
+ }}
+ filterList={{
+ status: ['In Progress', 'Scheduled', 'Draft', 'Failed']
+ }}
+ onSearch={(currData, searchTerm) => {
+ return currData.filter(d =>
+ d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+ || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+ || d.name.toLowerCase().match(searchTerm.toLowerCase())
+ );
+ }}
+ withPagination={true}
+ paginationType="basic"
+ pageSize={4}
+ onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+ />
+
+ );
+};
+`;
+
+export default {
+ title: 'Components/Table/States/Resource Table',
+ component: Table,
+ parameters: {
+ docs: {
+ docPage: {
+ customCode,
+ title: 'States in Resource Table',
+ props: {
+ components: { AsyncTable, SyncTable },
+ exclude: ['showHead'],
+ },
+ },
+ },
+ },
+};
diff --git a/core/components/organisms/table/__stories__/syncTable.story.jsx b/core/components/organisms/table/__stories__/syncTable.story.jsx
index ab2b899395..4a93fa5aa3 100644
--- a/core/components/organisms/table/__stories__/syncTable.story.jsx
+++ b/core/components/organisms/table/__stories__/syncTable.story.jsx
@@ -217,6 +217,7 @@ export default {
docs: {
docPage: {
customCode,
+ title: 'Sync Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/DataTable.story.jsx b/core/components/organisms/table/__stories__/types/DataTable.story.jsx
similarity index 99%
rename from core/components/organisms/table/__stories__/DataTable.story.jsx
rename to core/components/organisms/table/__stories__/types/DataTable.story.jsx
index 5f2d95b63e..04e2cb0f0b 100644
--- a/core/components/organisms/table/__stories__/DataTable.story.jsx
+++ b/core/components/organisms/table/__stories__/types/DataTable.story.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Card, Table } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
export const dataTable = () => {
@@ -410,7 +410,7 @@ const customCode = `() => {
}`;
export default {
- title: 'Components/Table/Data Table',
+ title: 'Components/Table/Types/Data Table',
component: Table,
parameters: {
docs: {
diff --git a/core/components/organisms/table/__stories__/ResourceTable.story.jsx b/core/components/organisms/table/__stories__/types/ResourceTable.story.jsx
similarity index 98%
rename from core/components/organisms/table/__stories__/ResourceTable.story.jsx
rename to core/components/organisms/table/__stories__/types/ResourceTable.story.jsx
index df7b700b7a..4adbafa25c 100644
--- a/core/components/organisms/table/__stories__/ResourceTable.story.jsx
+++ b/core/components/organisms/table/__stories__/types/ResourceTable.story.jsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
import { Card, Table, Menu, Avatar, Text } from '@/index';
-import { AsyncTable, SyncTable } from './_common_/types';
+import { AsyncTable, SyncTable } from '../_common_/types';
import { action } from '@/utils/action';
const data = [
@@ -307,12 +307,13 @@ const customCode = `
`;
export default {
- title: 'Components/Table/Resource Table',
+ title: 'Components/Table/Types/Resource Table',
component: Table,
parameters: {
docs: {
docPage: {
customCode,
+ title: 'Resource Table',
props: {
components: { AsyncTable, SyncTable },
exclude: ['showHead'],
diff --git a/core/components/organisms/table/__stories__/variants/size.story.jsx b/core/components/organisms/table/__stories__/variants/size.story.jsx
deleted file mode 100644
index 14dde8b353..0000000000
--- a/core/components/organisms/table/__stories__/variants/size.story.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import data from '@/components/organisms/grid/__stories__/_common_/data';
-import schema from '@/components/organisms/grid/__stories__/_common_/simpleSchema';
-import { Card, Heading, Table, Row, Column } from '@/index';
-import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
-
-// CSF format story
-export const size = () => {
- const values = ['comfortable', 'standard', 'compressed', 'tight'];
-
- // to freeze the object for typescript
-
- return (
-
-
- {values.map((v, index) => (
-
- {v}
-
-
- ))}
-
-
-
- {values.map((v, index) => (
-
- {v}
-
-
- ))}
-
-
-
- {values.map((v, index) => (
-
- {v}
-
-
-
- action(`on-row-click:- rowIndex: ${rowIndex} data: ${JSON.stringify(rowData)}`)()
- }
- />
-
-
-
- ))}
-
-
- );
-};
-
-const customCode = `
-() => {
- const data = ${JSON.stringify(data, null, 4)};
-
- const schema = [
- {
- name: 'name',
- displayName: 'Name',
- width: 300,
- resizable: true,
- separator: true,
- tooltip: true,
- translate: a => ({
- title: \`\${a.firstName} \${a.lastName}\`,
- firstName: a.firstName,
- lastName: a.lastName
- }),
- cellType: 'AVATAR_WITH_TEXT',
- },
- {
- name: 'email',
- displayName: 'Email',
- width: 350,
- resizable: true,
- },
- ];
-
- const values = ['resource', 'data'];
-
- return (
-
-
- {values.map((v, index) => (
-
- {v}
-
-
-
- action(\`on-row-click:- rowIndex: \${rowIndex} data: \${JSON.stringify(rowData)}\`)()
- }
- />
-
-
-
- ))}
-
-
- );
-};
-`;
-
-export default {
- title: 'Components/Table/Variants/Type',
- component: Table,
- parameters: {
- docs: {
- docPage: {
- customCode,
- props: {
- components: { AsyncTable, SyncTable },
- exclude: ['showHead'],
- },
- },
- },
- },
-};
diff --git a/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx b/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx
deleted file mode 100644
index 8d250f3993..0000000000
--- a/core/components/organisms/table/__stories__/variants/withCheckbox.story.jsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from 'react';
-import data from '@/components/organisms/grid/__stories__/_common_/data';
-import schema from '@/components/organisms/grid/__stories__/_common_/simpleSchema';
-import { Card, Heading, Table, Row, Column } from '@/index';
-import { action } from '@/utils/action';
-import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
-
-// CSF format story
-export const withCheckbox = () => {
- const values = [true, false];
-
- // to freeze the object for typescript
-
- return (
-
-
- {values.map((v, index) => (
-
- {`withPagination: ${v}`}
-
-
-
- action(
- `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
- selectedList
- )} selectAll: ${selectAll}`
- )()
- }
- onPageChange={(newPage) => action(`on-page-change:- ${newPage}`)()}
- />
-
-
-
- ))}
-
-
- );
-};
-
-const customCode = `
-() => {
- const data = ${JSON.stringify(data, null, 4)};
-
- const schema = [
- {
- name: 'name',
- displayName: 'Name',
- resizable: true,
- separator: true,
- tooltip: true,
- translate: a => ({
- title: \`\${a.firstName} \${a.lastName}\`,
- firstName: a.firstName,
- lastName: a.lastName
- }),
- cellType: 'AVATAR_WITH_TEXT',
- },
- {
- name: 'email',
- displayName: 'Email',
- width: 350,
- resizable: true,
- },
- ];
-
- const values = [true, false];
-
- return (
-
-
- {values.map((v, index) => (
-
- {\`withPagination: \${v}\`}
-
-
- console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)}
- pageSize={15}
- onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
- />
-
-
-
- ))}
-
-
- );
-};
-`;
-
-export default {
- title: 'Components/Table/Variants/With Checkbox',
- component: Table,
- parameters: {
- docs: {
- docPage: {
- customCode,
- props: {
- components: { AsyncTable, SyncTable },
- exclude: ['showHead'],
- },
- },
- },
- },
-};
diff --git a/core/components/organisms/table/__stories__/variants/withPagination.story.jsx b/core/components/organisms/table/__stories__/variants/withPagination.story.jsx
deleted file mode 100644
index 1d61556ee4..0000000000
--- a/core/components/organisms/table/__stories__/variants/withPagination.story.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as React from 'react';
-import { Card, Heading, Table, Row, Column } from '@/index';
-import { action } from '@/utils/action';
-import data from '@/components/organisms/grid/__stories__/_common_/data';
-import schema from '@/components/organisms/grid/__stories__/_common_/schema';
-import { AsyncTable, SyncTable } from '@/components/organisms/table/__stories__/_common_/types';
-
-// CSF format story
-export const withPagination = () => {
- const values = ['basic', 'jump'];
-
- // to freeze the object for typescript
-
- return (
-
-
- {values.map((v, index) => (
-
- {`paginationType: ${v}`}
-
-
- action(`on-page-change:- ${newPage}`)()}
- />
-
-
-
- ))}
-
-
- );
-};
-
-const customCode = `
-() => {
- const data = ${JSON.stringify(data, null, 4)};
-
- const schema = [
- {
- name: 'name',
- displayName: 'Name',
- resizable: true,
- separator: true,
- tooltip: true,
- translate: a => ({
- title: \`\${a.firstName} \${a.lastName}\`,
- firstName: a.firstName,
- lastName: a.lastName
- }),
- filters: [
- { label: 'A-G', value: 'a-g' },
- { label: 'H-R', value: 'h-r' },
- { label: 'S-Z', value: 's-z' },
- ],
- onFilterChange: (a, filters) => {
- for (const filter of filters) {
- switch (filter) {
- case 'a-g':
- if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
- break;
- case 'h-r':
- if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
- break;
- case 's-z':
- if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
- break;
- }
- }
- return false;
- },
- cellType: 'AVATAR_WITH_TEXT',
- },
- {
- name: 'email',
- displayName: 'Email',
- width: 350,
- resizable: true,
- sorting: false,
- },
- ];
-
- const values = ['basic', 'jump'];
-
- return (
-
-
- {values.map((v, index) => (
-
- {\`paginationType: \${v}\`}
-
-
- console.log(\`on-page-change:- \${newPage}\`)}
- />
-
-
-
- ))}
-
-
- );
-};
-`;
-
-export default {
- title: 'Components/Table/Variants/With Pagination',
- component: Table,
- parameters: {
- docs: {
- docPage: {
- customCode,
- props: {
- components: { AsyncTable, SyncTable },
- exclude: ['showHead'],
- },
- },
- },
- },
-};
diff --git a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
index 70c5153a3f..7f6bd5e3d1 100644
--- a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
+++ b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
@@ -419,7 +419,7 @@ import './style.css';
size="tiny"
onClick={() => setSelectAllRecords(false)}
>
- Clear Selection
+ Clear selection
)
}