chore(react/collections/table): add more properties

This commit is contained in:
Elian Doran 2025-09-07 19:41:25 +03:00
parent e25c5cc6c7
commit b62d1a303c
No known key found for this signature in database
3 changed files with 10 additions and 13 deletions

View File

@ -23,6 +23,7 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1; const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1;
const [ columnDefs, setColumnDefs ] = useState<ColumnDefinition[]>(); const [ columnDefs, setColumnDefs ] = useState<ColumnDefinition[]>();
const [ rowData, setRowData ] = useState<TableData[]>(); const [ rowData, setRowData ] = useState<TableData[]>();
const [ movableRows, setMovableRows ] = useState<boolean>();
const tabulatorRef = useRef<VanillaTabulator>(null); const tabulatorRef = useRef<VanillaTabulator>(null);
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
@ -38,6 +39,7 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
}); });
setColumnDefs(columnDefs); setColumnDefs(columnDefs);
setRowData(rowData); setRowData(rowData);
setMovableRows(movableRows);
}); });
}, [ note ]); }, [ note ]);
@ -58,6 +60,10 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
footerElement={<TableFooter note={note} />} footerElement={<TableFooter note={note} />}
events={contextMenuEvents} events={contextMenuEvents}
persistence {...persistenceProps} persistence {...persistenceProps}
layout="fitDataFill"
index="branchId"
movableColumns
movableRows={movableRows}
/> />
<TableFooter note={note} /> <TableFooter note={note} />
</> </>

View File

@ -5,14 +5,13 @@ import "../../../../src/stylesheets/table.css";
import { ComponentChildren, RefObject } from "preact"; import { ComponentChildren, RefObject } from "preact";
import { ParentComponent, renderReactWidget } from "../../react/react_utils"; import { ParentComponent, renderReactWidget } from "../../react/react_utils";
interface TableProps<T> extends Pick<Options, "persistence" | "persistenceReaderFunc" | "persistenceWriterFunc"> { interface TableProps<T> extends Omit<Options, "data" | "footerElement" | "index"> {
tabulatorRef: RefObject<VanillaTabulator>; tabulatorRef: RefObject<VanillaTabulator>;
className?: string; className?: string;
columns: ColumnDefinition[];
data?: T[]; data?: T[];
modules?: (new (table: VanillaTabulator) => Module)[]; modules?: (new (table: VanillaTabulator) => Module)[];
footerElement?: ComponentChildren;
events?: Partial<EventCallBackMethods>; events?: Partial<EventCallBackMethods>;
index: keyof T;
} }
export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, events, ...restProps }: TableProps<T>) { export default function Tabulator<T>({ className, columns, data, modules, tabulatorRef: externalTabulatorRef, footerElement, events, ...restProps }: TableProps<T>) {
@ -34,7 +33,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
columns, columns,
data, data,
footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined), footerElement: (parentComponent && footerElement ? renderReactWidget(parentComponent, footerElement)[0] : undefined),
...restProps ...restProps,
}); });
tabulatorRef.current = tabulator; tabulatorRef.current = tabulator;
@ -59,7 +58,7 @@ export default function Tabulator<T>({ className, columns, data, modules, tabula
}, Object.values(events ?? {})); }, Object.values(events ?? {}));
// Change in data. // Change in data.
useEffect(() => { tabulatorRef.current?.setData(data) }, [ data ]); useEffect(() => { console.log("Got data ", data); tabulatorRef.current?.setData(data) }, [ data ]);
return ( return (
<div ref={containerRef} className={className} /> <div ref={containerRef} className={className} />

View File

@ -61,14 +61,6 @@ export default class TableView extends ViewMode<StateInfo> {
const viewStorage = await this.viewStorage.restore(); const viewStorage = await this.viewStorage.restore();
this.persistentData = viewStorage?.tableData || {}; this.persistentData = viewStorage?.tableData || {};
let opts: Options = {
layout: "fitDataFill",
index: "branchId",
movableColumns: true,
movableRows,
footerElement: buildFooter(this.parentNote),
};
if (hasChildren) { if (hasChildren) {
opts = { opts = {
...opts, ...opts,