64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
|
|
// Grid
|
|
import type { ColDef, GridOptions, ValueFormatterParams } from "ag-grid-community";
|
|
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
|
|
|
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
|
|
|
import { MoneyDTO } from "@erp/core";
|
|
import { formatDate, formatMoney } from "@erp/core/client";
|
|
// Core CSS
|
|
import { AgGridReact } from "ag-grid-react";
|
|
|
|
|
|
|
|
// Create new GridExample component
|
|
export const CustomerInvoiceItemsEditorGrid = ({ items: any[] }) => {
|
|
|
|
// Column Definitions: Defines & controls grid columns.
|
|
const [colDefs] = useState<ColDef[]>([
|
|
|
|
]);
|
|
|
|
const gridOptions: GridOptions = {
|
|
columnDefs: colDefs,
|
|
defaultColDef: {
|
|
editable: true,
|
|
flex: 1,
|
|
minWidth: 100,
|
|
filter: false,
|
|
sortable: false,
|
|
resizable: true,
|
|
},
|
|
sideBar: true,
|
|
statusBar: {
|
|
statusPanels: [
|
|
{ statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
|
|
{ statusPanel: "agAggregationComponent" },
|
|
],
|
|
},
|
|
rowGroupPanelShow: "always",
|
|
pagination: true,
|
|
paginationPageSize: 10,
|
|
paginationPageSizeSelector: [10, 20, 30, 50],
|
|
enableCharts: true,
|
|
localeText: AG_GRID_LOCALE_ES,
|
|
rowSelection: { mode: "multiRow" },
|
|
};
|
|
|
|
// Container: Defines the grid's theme & dimensions.
|
|
return (
|
|
<div
|
|
className='ag-theme-alpine'
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<AgGridReact rowData={data?.items ?? []} loading={isLoading || isPending} {...gridOptions} />
|
|
</div>
|
|
);
|
|
};
|