How to load data into lightening data table component using response from GraphQL query (wire call) - lwc

Question

I have a requirement to load data using the graphQL response into the lightening data table.I am able to fetch the response from the grapghQL query into the js . I just need to map the corresponding fields to the data column and populate the table.The below is the dummy code. I have the response from grapgql in an object format just have to assign the value and populate the column headers and value. Could someone help me achieve this .Any pointers would help.
LigteningDataTable.html
<lightning-datatable
key-field="id"
data={data}
hide-checkbox-column="true"
columns={columns}>
</lightning-datatable>
LigteningDataTable.js
```
import { LightningElement, api, wire } from 'lwc';
import { CapabilityMixin } from 'laf/pageCapability';
import { gql, unstable_graphql } from 'lightning/uiGraphQLApi';
export default class ServiceDocumentListComponent extends CapabilityMixin(LightningElement) {
get data(){
return [...Array(100)].map((_, index) => {
return {
name: ` (${index})`,
website: 'www.salesforce.com1ß',
amount: Math.floor(Math.random() * 100),
phone: `${Math.floor(Math.random() * 9000000000) + 1000000000}`,
closeAt: new Date(
Date.now() + 86400000 * Math.ceil(Math.random() * 20)
),
};
});
}
get fields() {
[
{ label: 'Label', fieldName: 'name' , wrapText: true },
{ label: 'Website', fieldName: 'website', type: 'url' , wrapText: true },
{ label: 'Phone', fieldName: 'phone', type: 'phone' , wrapText: true },
{ label: 'Balance', fieldName: 'amount', type: 'currency', wrapText: true },
{ label: 'CloseAt', fieldName: 'closeAt', type: 'date', wrapText: true },
];
}
```