mirror of
				https://github.com/zadam/trilium.git
				synced 2025-10-31 11:39:01 +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
	 Elian Doran
						Elian Doran