diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx index 665d8b9c9a8a430ccc1d7518a7034bba04ac5ca5..1a7acb10e697eb52ada0cdd2bd0ce7fe255d9824 100644 --- a/src/stories/Table.stories.tsx +++ b/src/stories/Table.stories.tsx @@ -63,7 +63,7 @@ const rows = [ name: "Tony", role: "CEO", status: <Badge text="Active" />, - action: <Button label="Edit" color="secondary" icon="edit" />, + action: <Button label="Edit" color="secondary" icon="Edit" />, }, { key: "2", @@ -72,8 +72,8 @@ const rows = [ status: <Badge text="Paused" color="warning" />, action: ( <div className="flex flex-row gap-3 w-fit"> - <Button label="Edit" color="secondary" icon="edit" /> - <Button label="Delete" color="negative" icon="cross" /> + <Button label="Edit" color="secondary" icon="Edit" /> + <Button label="Delete" color="negative" icon="Cross" /> </div> ), }, @@ -84,8 +84,8 @@ const rows = [ status: <Badge text="Inactive" color="negative" />, action: ( <div className="flex flex-row gap-3"> - <Button label="Edit" color="secondary" icon="edit" /> - <Button label="Delete" color="negative" icon="cross" /> + <Button label="Edit" color="secondary" icon="Edit" /> + <Button label="Delete" color="negative" icon="Cross" /> </div> ), }, @@ -96,8 +96,8 @@ const rows = [ status: <Badge text="Vacation" color="neutral" />, action: ( <div className="flex flex-row gap-3"> - <Button label="Edit" color="secondary" icon="edit" /> - <Button label="View" color="primary" icon="eye" /> + <Button label="Edit" color="secondary" icon="Edit" /> + <Button label="View" color="primary" icon="Eye" /> </div> ), }, @@ -110,14 +110,21 @@ export const TableWithText: StoryObj = { }, }; +export const EmptyTable: StoryObj = { + args: { + columns: textColumns, + rows: [], + }, +}; + export const TableWithComponentsInHeader: StoryObj = { args: { columns: textColumns, rows: textRows, headerContent: ( <div className="flex flex-row gap-2 pb-[10px]"> - <Button label="Create New" color="positive" icon="plus" /> - <Button label="Edit" color="secondary" icon="edit" /> + <Button label="Create New" color="positive" icon="Plus" /> + <Button label="Edit" color="secondary" icon="Edit" /> </div> ), }, @@ -175,8 +182,6 @@ export const TableWithReorderableRows = () => { ); }; - - type Row = { row_id: string; name: string; @@ -184,8 +189,7 @@ type Row = { salary: number; notes: string; action: JSX.Element; -} - +}; const editableColumnRows = [ { @@ -208,24 +212,38 @@ const editableColumnRows = [ role: "Project manager", salary: 2000000, notes: "Micro manager", - } + }, ] as Row[]; /** Cells can be edited, cell values can be validated */ export const TableWithEditableCells = () => { - const textEditor = (options: ColumnEditorOptions) => { - return <TextInput value={options.value as string} onValueChange={(e) => options.editorCallback && options.editorCallback(e)}></TextInput> + return ( + <TextInput + value={options.value as string} + onValueChange={(e) => + options.editorCallback && options.editorCallback(e) + } + ></TextInput> + ); }; const numberEditor = (options: ColumnEditorOptions) => { - return <TextInput type="number" value={options.value as string} onValueChange={(e) => options.editorCallback && options.editorCallback(e)}></TextInput> + return ( + <TextInput + type="number" + value={options.value as string} + onValueChange={(e) => + options.editorCallback && options.editorCallback(e) + } + ></TextInput> + ); }; const onCellEditComplete = (e: ColumnEvent) => { const { rowData, newValue, field } = e; rowData[field] = newValue; - } + }; const isPositiveInteger = (val: unknown) => { let str = String(val); @@ -233,14 +251,14 @@ export const TableWithEditableCells = () => { str = str.trim(); if (!str) { - return false; + return false; } - str = str.replace(/^0+/, '') || '0'; + str = str.replace(/^0+/, "") || "0"; const n = Math.floor(Number(str)); return n !== Infinity && String(n) === str && n >= 0; -}; + }; const onSalaryEditComplete = (e: ColumnEvent) => { const { rowData, newValue, field, originalEvent: event } = e; @@ -249,46 +267,81 @@ export const TableWithEditableCells = () => { } else { event.preventDefault(); } - } + }; const editableColumns = [ - { field: "row_id", header: "ID", style: { width: "30%" }}, - { field: "name", header: "Name", style: { width: "20%" }, editor: textEditor, onCellEditComplete: onCellEditComplete }, - { field: "role", header: "Role", style: { width: "20%" }}, - { field: "salary", header: "Salary", style: { width: "10%" }, editor: numberEditor, onCellEditComplete: onSalaryEditComplete}, - { field: "notes", header: "Notes", style: { width: "10%" }}, - { field: "action", header: "", style: { width: "10%" }}, + { field: "row_id", header: "ID", style: { width: "30%" } }, + { + field: "name", + header: "Name", + style: { width: "20%" }, + editor: textEditor, + onCellEditComplete: onCellEditComplete, + }, + { field: "role", header: "Role", style: { width: "20%" } }, + { + field: "salary", + header: "Salary", + style: { width: "10%" }, + editor: numberEditor, + onCellEditComplete: onSalaryEditComplete, + }, + { field: "notes", header: "Notes", style: { width: "10%" } }, + { field: "action", header: "", style: { width: "10%" } }, ]; const [editableRows, setEditableRows] = useState<Row[]>([]); - useEffect(() => { - setEditableRows(editableColumnRows) + useEffect(() => { + setEditableRows(editableColumnRows); }, []); - const deleteButton = (row: Row) => <Button label={"Delete"} icon={"cross"} onClick={() => { deleteEmployee(row) }} /> + const deleteButton = (row: Row) => ( + <Button + label="Delete" + icon="Cross" + onClick={() => { + deleteEmployee(row); + }} + /> + ); for (const row of editableRows) { row.action = deleteButton(row); } const addEmployee = () => { - const newRow = { row_id: crypto.randomUUID(), name: "", role: "", salary: 0, notes: "" } as Row; + const newRow = { + row_id: crypto.randomUUID(), + name: "", + role: "", + salary: 0, + notes: "", + } as Row; newRow.action = deleteButton(newRow); - setEditableRows(old => [...old, newRow]) + setEditableRows((old) => [...old, newRow]); }; const deleteEmployee = (row: Row) => { - const newRows = editableRows.filter(r => r !== row); + const newRows = editableRows.filter((r) => r !== row); setEditableRows(newRows); }; return ( - <Table - headerContent={<div className="flex flex-row gap-2 pb-[10px]"><Button color="positive" icon="plus" label="Add Employee" onClick={addEmployee}/></div>} - columns={editableColumns} - rows={editableRows} - editMode="cell" - /> + <Table + headerContent={ + <div className="flex flex-row gap-2 pb-[10px]"> + <Button + color="positive" + icon="Plus" + label="Add Employee" + onClick={addEmployee} + /> + </div> + } + columns={editableColumns} + rows={editableRows} + editMode="cell" + /> ); -}; \ No newline at end of file +};