88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import { Meta, StoryFn } from '@storybook/react';
|
|
import { Clock } from 'lucide-react';
|
|
import { createColumnHelper, TableOptions } from '@tanstack/react-table';
|
|
|
|
import { isEditableTableMeta } from '@@/datatables/editable/isEditableTableMeta';
|
|
import { EditableDatatable } from '@@/datatables/editable/EditableDatatable';
|
|
|
|
import { BasicTableSettings } from '../types';
|
|
import { TableState } from '../useTableState';
|
|
|
|
import { actionsColumn } from './actionsColumn';
|
|
|
|
interface BasicRow {
|
|
Name: string;
|
|
Created: string;
|
|
}
|
|
|
|
type Args = {
|
|
isLoading: boolean;
|
|
data: BasicRow[];
|
|
settings: TableState<BasicTableSettings>;
|
|
columns: TableOptions<BasicRow>['columns'];
|
|
};
|
|
|
|
export default {
|
|
component: EditableDatatable,
|
|
title: 'Components/Tables/EditableDatatable',
|
|
} as Meta;
|
|
|
|
function Template({ isLoading, data, settings, columns }: Args) {
|
|
return (
|
|
<EditableDatatable
|
|
columns={columns}
|
|
isLoading={isLoading}
|
|
dataset={data}
|
|
settingsManager={settings}
|
|
title="Edge Jobs"
|
|
titleIcon={Clock}
|
|
data-cy="edge-jobs-datatable"
|
|
acceptRow={() => {}}
|
|
revertRow={() => {}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const columnHelper = createColumnHelper<BasicRow>();
|
|
|
|
export const Default: StoryFn<Args> = Template.bind({});
|
|
const editableColumns = [
|
|
columnHelper.accessor('Name', {
|
|
header: 'Name',
|
|
cell: ({ row: { original, index }, table }) => {
|
|
if (!isEditableTableMeta(table.options.meta)) {
|
|
return null;
|
|
}
|
|
|
|
const editableRowIndex = table.options.meta.getEditableRow();
|
|
return index === editableRowIndex ? (
|
|
<input type="text" name="name" value={original.Name} />
|
|
) : (
|
|
<div>{original.Name}</div>
|
|
);
|
|
},
|
|
}),
|
|
columnHelper.accessor('Created', {
|
|
header: 'Created',
|
|
}),
|
|
actionsColumn<BasicRow>(() => {}),
|
|
];
|
|
Default.args = {
|
|
isLoading: false,
|
|
data: [
|
|
{ Name: 'Juan', Created: '2021-01-21' },
|
|
{ Name: 'Ji Hee', Created: '2023-03-01' },
|
|
{ Name: 'Saki', Created: '2023-08-16' },
|
|
{ Name: 'Eve', Created: '2017-11-06' },
|
|
],
|
|
columns: editableColumns,
|
|
settings: {
|
|
sortBy: { id: '', desc: true },
|
|
setSortBy: () => {},
|
|
search: '',
|
|
setSearch: () => {},
|
|
pageSize: 10,
|
|
setPageSize: () => {},
|
|
},
|
|
};
|