How can I render the fields and datatable below image using <p:panelGrid>?

Question

I have no idea how to render the below image with input fields and datatable with the exact alignment in UI.

I refered some documentation with examples,but i can't find the pattern for datatable.Attached the image below.Kindly share your thoughts for this as outline.

Answer 1

I would consider using PrimeFlex instead of p:panelGrid .

You basically need a 3 column grid layout. See the first example: https://www.primefaces.org/primeflex/gridsystem

An the input can be done using form layout. See the horizontal examples: https://www.primefaces.org/primeflex/formlayout

For the data.table, simply use the p:dataTable . See: https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml