@kadconsulting/dry
Version:
KAD Reusable Component Library
408 lines • 12.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { action } from '@storybook/addon-actions';
import DataTable from './DataTable';
import { FilterType, BadgeVariants, BadgeSizes, } from './DataTableTypes';
import ColumnControls from './ColumnControls/ColumnControls';
import { generateMockPurchaseOrders } from './utils';
import generateColumnUniqueValues from '../../utils/generateColumnUniqueValues';
import { SemanticColorsEnum, SecondaryColorsEnum } from '../Badge/BadgeTypes';
export default {
title: 'Components/DataTable',
component: DataTable,
argTypes: {
hasPageSizeInput: { control: 'boolean' },
hasGoToPageInput: { control: 'boolean' },
hasAccordion: { control: 'boolean' },
loading: { control: 'boolean' },
loadingRowCount: { control: 'number' },
pageSize: { control: 'number' },
isDraggable: { control: 'boolean' },
hasResize: { control: 'boolean' },
},
parameters: {
docs: {
description: {
component: 'DataTable is a powerful and flexible component for displaying tabular data with various features like sorting, filtering, pagination, and more.',
},
},
},
};
const sampleColumns = [
{ Header: 'Order #', accessor: 'orderNumber', filterType: FilterType.Text },
{
Header: 'Custom Class',
accessor: 'customClass',
filterType: FilterType.Text,
className: 'test-test',
},
{ Header: 'Project', accessor: 'projectId', filterType: FilterType.Text },
{ Header: 'Status', accessor: 'orderState', filterType: FilterType.Text },
{ Header: 'Vendor', accessor: 'vendorId', filterType: FilterType.Text },
{ Header: 'PO Owner', accessor: 'poOwner', filterType: FilterType.Text },
{
Header: 'Date Created',
accessor: 'dateCreated',
filterType: FilterType.DateRange,
},
{
Header: 'Submitted By',
accessor: 'submittedBy',
filterType: FilterType.Text,
},
{ Header: 'Amount', accessor: 'amount', filterType: FilterType.Number },
];
const sampleData = generateMockPurchaseOrders({
numOrders: 100,
longText: false,
});
const sampleLongTextData = generateMockPurchaseOrders({
numOrders: 100,
longText: true,
});
const badgeColumnConfig = {
orderState: {
'Purchase Order': {
color: SemanticColorsEnum.Error,
variant: BadgeVariants.DARK,
size: BadgeSizes.SM,
},
'RFQ Sent': {
color: SecondaryColorsEnum.Blue,
variant: BadgeVariants.DARK,
size: BadgeSizes.SM,
},
Cancelled: {
color: SecondaryColorsEnum.GrayIron,
variant: BadgeVariants.DARK,
size: BadgeSizes.SM,
},
},
projectId: {
Project1: {
color: SecondaryColorsEnum.Fuchsia,
variant: BadgeVariants.DARK,
size: BadgeSizes.SM,
},
Project6: {
color: SecondaryColorsEnum.GrayTrue,
variant: BadgeVariants.DARK,
size: BadgeSizes.SM,
},
},
};
const Template = (args) => {
const [filters, setFilters] = useState({});
const [columnOrder, setColumnOrder] = useState([]);
const [columnWidths, setColumnWidths] = useState({});
const [visibleColumns, setVisibleColumns] = useState([]);
const [pinnedColumns, setPinnedColumns] = useState([]);
const [pageIndex, setPageIndex] = useState(0);
const [data, setData] = useState(args.data);
useEffect(() => {
setData(args.data);
}, [args.data]);
return (_jsxs("div", { children: [_jsx(ColumnControls, { columnUniqueValues: generateColumnUniqueValues(data), columns: args.columns, filters: filters, onFilterChange: setFilters, columnOrder: columnOrder, onColumnOrderChange: setColumnOrder, columnWidths: columnWidths, onColumnResize: setColumnWidths, onColumnVisibilityChange: setVisibleColumns, onColumnPinningChange: setPinnedColumns }), _jsx(DataTable, { ...args, data: data, pageIndex: pageIndex, setPageIndex: setPageIndex, filters: filters, columnOrder: columnOrder, columnWidths: columnWidths, visibleColumns: visibleColumns, pinnedColumns: pinnedColumns, setColumnOrder: setColumnOrder, setColumnWidths: setColumnWidths, onPageChange: (newPageIndex, newPageSize) => {
action('Page Changed')({ newPageIndex, newPageSize });
setPageIndex(newPageIndex);
}, handleDataFilterChange: (filteredData) => {
action('Data Filtered')(filteredData);
setData(filteredData);
} })] }));
};
export const Default = Template.bind({});
Default.args = {
columns: sampleColumns,
data: sampleData,
pageSize: 10,
loading: false,
loadingRowCount: 0,
handleRowClick: action('Row Clicked'),
hasPageSizeInput: false,
hasGoToPageInput: false,
badgeColumnConfig,
};
Default.parameters = {
docs: {
description: {
story: 'This is the default configuration of the DataTable component.',
},
},
};
export const WithAccordion = Template.bind({});
WithAccordion.args = {
...Default.args,
hasAccordion: true,
};
WithAccordion.parameters = {
docs: {
description: {
story: 'DataTable with accordion feature enabled for expandable rows.',
},
},
};
export const LongText = Template.bind({});
LongText.args = {
...Default.args,
data: sampleLongTextData,
};
LongText.parameters = {
docs: {
description: {
story: 'DataTable handling long text content in cells.',
},
},
};
export const LoadingState = Template.bind({});
LoadingState.args = {
...Default.args,
loading: true,
loadingRowCount: 5,
};
LoadingState.parameters = {
docs: {
description: {
story: 'DataTable in loading state with skeleton rows.',
},
},
};
export const WithPaginationInputs = Template.bind({});
WithPaginationInputs.args = {
...Default.args,
hasPageSizeInput: true,
hasGoToPageInput: true,
};
WithPaginationInputs.parameters = {
docs: {
description: {
story: 'DataTable with custom pagination inputs for page size and direct page navigation.',
},
},
};
export const CustomPageSize = Template.bind({});
CustomPageSize.args = {
...Default.args,
pageSize: 20,
};
CustomPageSize.parameters = {
docs: {
description: {
story: 'DataTable with a custom page size of 20 rows per page.',
},
},
};
export const WithDefaultSort = Template.bind({});
WithDefaultSort.args = {
...Default.args,
columns: sampleColumns.map((col) => col.accessor === 'dateCreated' ? { ...col, defaultSort: true } : col),
};
WithDefaultSort.parameters = {
docs: {
description: {
story: 'DataTable with a default sort applied to the Date Created column.',
},
},
};
export const DraggableColumns = Template.bind({});
DraggableColumns.args = {
...Default.args,
isDraggable: true,
};
DraggableColumns.parameters = {
docs: {
description: {
story: 'DataTable with draggable columns for custom ordering.',
},
},
};
export const ResizableColumns = Template.bind({});
ResizableColumns.args = {
...Default.args,
hasResize: true,
};
ResizableColumns.parameters = {
docs: {
description: {
story: 'DataTable with resizable columns for custom widths.',
},
},
};
export const CustomCellRendering = Template.bind({});
CustomCellRendering.args = {
...Default.args,
columns: [
...sampleColumns,
{
Header: 'Custom',
accessor: 'custom',
Cell: ({ value }) => (_jsx("div", { style: { color: 'blue', fontWeight: 'bold' }, children: value })),
},
],
data: sampleData.map((item) => ({ ...item, custom: 'Custom Value' })),
};
CustomCellRendering.parameters = {
docs: {
description: {
story: 'DataTable with a custom cell rendering for a specific column.',
},
},
};
export const AllFeaturesEnabled = Template.bind({});
AllFeaturesEnabled.args = {
...Default.args,
hasAccordion: true,
hasPageSizeInput: true,
hasGoToPageInput: true,
isDraggable: true,
hasResize: true,
loadingRowCount: 3,
handleRowClick: action('Row Clicked'),
};
AllFeaturesEnabled.parameters = {
docs: {
description: {
story: 'DataTable with all available features enabled.',
},
},
};
export const NestedData = Template.bind({});
NestedData.args = {
...Default.args,
columns: [
...sampleColumns,
{
Header: 'Nested Info',
accessor: 'nestedInfo.value',
filterType: FilterType.Text,
},
],
data: sampleData.map((item) => ({
...item,
nestedInfo: { value: `Nested ${item.orderNumber}` },
})),
};
NestedData.parameters = {
docs: {
description: {
story: 'DataTable handling nested data structures within rows.',
},
},
};
export const ColumnGrouping = Template.bind({});
ColumnGrouping.args = {
...Default.args,
columns: [
{
Header: 'Order Info',
columns: [
{
Header: 'Order #',
accessor: 'orderNumber',
// @ts-ignore
filterType: FilterType.Text,
},
{
Header: 'Status',
accessor: 'orderState',
// @ts-ignore
filterType: FilterType.Text,
},
],
},
{
Header: 'Project Info',
columns: [
{
Header: 'Project',
accessor: 'projectId',
// @ts-ignore
filterType: FilterType.Text,
},
{
Header: 'PO Owner',
accessor: 'poOwner',
// @ts-ignore
filterType: FilterType.Text,
},
],
},
...sampleColumns.slice(4),
],
};
ColumnGrouping.parameters = {
docs: {
description: {
story: 'DataTable with grouped columns to organize related information.',
},
},
};
export const InfiniteScroll = Template.bind({});
InfiniteScroll.args = {
...Default.args,
pageSize: 20,
onPageChange: action('Load More Data'),
};
InfiniteScroll.parameters = {
docs: {
description: {
story: 'DataTable with infinite scroll pagination. Note: This requires additional implementation in the DataTable component.',
},
},
};
export const ExportData = Template.bind({});
ExportData.args = {
...Default.args,
};
ExportData.parameters = {
docs: {
description: {
story: 'DataTable with options to export data in various formats. Note: This requires additional implementation in the DataTable component.',
},
},
};
export const RowSelection = Template.bind({});
RowSelection.args = {
...Default.args,
};
RowSelection.parameters = {
docs: {
description: {
story: 'DataTable with row selection capability. Users can select multiple rows.',
},
},
};
export const VirtualizedRows = Template.bind({});
VirtualizedRows.args = {
...Default.args,
data: generateMockPurchaseOrders({ numOrders: 10000, longText: false }),
};
VirtualizedRows.parameters = {
docs: {
description: {
story: 'DataTable with virtualized rows for handling large datasets efficiently. Note: This requires additional implementation in the DataTable component.',
},
},
};
export const ExpandableRows = Template.bind({});
ExpandableRows.args = {
...Default.args,
};
ExpandableRows.parameters = {
docs: {
description: {
story: 'DataTable with expandable rows to show additional details.',
},
},
};
export const ResponsiveLayout = Template.bind({});
ResponsiveLayout.args = {
...Default.args,
};
ResponsiveLayout.parameters = {
docs: {
description: {
story: 'DataTable with a responsive layout that adapts to different screen sizes. Note: This requires additional CSS and potentially component logic.',
},
},
};
//# sourceMappingURL=DataTable.stories.js.map