mirror of
https://github.com/zadam/trilium.git
synced 2025-10-30 19:19:03 +01:00
chore(react/collections/table): add more properties
This commit is contained in:
parent
e25c5cc6c7
commit
b62d1a303c
@ -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} />
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -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} />
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user