I have created lwc for my custom object and I used lightning datatable for viewing it. Unfortunately I have lot of fields and hence, I would like to change the type of view. I tried using lightning list or tabs and it is not working. Please find the attached output.
Javascript
import { LightningElement, wire } from 'lwc';import Case from '@salesforce/schema/Request_for_proposal__c.Case_Statement__c';import CONSULTANT_REVENUE from '@salesforce/schema/Request_for_proposal__c.Consultant_Salary__c';import CONSULTANT_DAYS from '@salesforce/schema/Request_for_proposal__c.Consultant_Summary__c';import CONSULTANT_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Consultant_Estimation__c';import DEVELOPER_REVENUE from '@salesforce/schema/Request_for_proposal__c.Developer_Salary__c';import DEVELOPER_DAYS from '@salesforce/schema/Request_for_proposal__c.Developer_Summary__c';import DEVELOPER_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Developer_Estimation__c';import SENIOR_CONSULTANT_REVENUE from '@salesforce/schema/Request_for_proposal__c.Senior_Consultant_Salary__c';import SENIOR_CONSULTANT_DAYS from '@salesforce/schema/Request_for_proposal__c.Senior_Consultant_Summary__c';import SENIOR_CONSULTANT_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Senior_Consultant_Estimation__c';import SENIOR_DEVELOPER_REVENUE from '@salesforce/schema/Request_for_proposal__c.Senior_Developer_Salary__c';import SENIOR_DEVELOPER_DAYS from '@salesforce/schema/Request_for_proposal__c.Senior_Developer_Summary__c';import SENIOR_DEVELOPER_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Senior_Developer_Estimation__c';import PERSONAL_MANAGER_REVENUE from '@salesforce/schema/Request_for_proposal__c.Personal_Manager__c';import PERSONAL_MANAGER_DAYS from '@salesforce/schema/Request_for_proposal__c.Personal_Manager_Summary__c';import PERSONAL_MANAGER_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Personal_Manager_Estimation__c';import TOTAL_ESTIMATION from '@salesforce/schema/Request_for_proposal__c.Total_Estimation__c';import getrfp from '@salesforce/apex/Estimationcontroller.getrfp';const COLUMNS = [ { label: 'Case Statement', fieldName: Case.fieldApiName, type: 'text' }, { label: 'Consultant Revenue', fieldName: CONSULTANT_REVENUE.fieldApiName, type: 'currency'}, { label: 'Consultant (Estimation of Days)', ffieldName: CONSULTANT_DAYS.fieldApiName, type: 'number' }, { label: 'Consultant (Estimation of Total Revenue)', ffieldName: CONSULTANT_ESTIMATION.fieldApiName, type: 'currency' }, {label: 'Developer Revenue', fieldName: DEVELOPER_REVENUE.fieldApiName, type: 'currency'}, { label: 'Developer (Estimation of Days)', ffieldName: DEVELOPER_DAYS.fieldApiName, type: 'number' }, { label: 'Developer (Estimation of Total Revenue)', ffieldName: DEVELOPER_ESTIMATION.fieldApiName, type: 'currency' }, {label: 'Senior Consultant Revenue', fieldName: SENIOR_CONSULTANT_REVENUE.fieldApiName, type: 'currency'}, { label: 'Senior Consultant (Estimation of Days)', ffieldName: SENIOR_CONSULTANT_DAYS.fieldApiName, type: 'number' }, { label: 'Senior Consultant (Estimation of Total Revenue)', ffieldName: SENIOR_CONSULTANT_ESTIMATION.fieldApiName, type: 'currency' }, {label: 'Senior Developer Revenue', fieldName: SENIOR_DEVELOPER_REVENUE.fieldApiName, type: 'currency'}, { label: 'Senior Developer (Estimation of Days)', ffieldName: SENIOR_DEVELOPER_DAYS.fieldApiName, type: 'number' }, { label: 'Senior Developer (Estimation of Total Revenue)', ffieldName: SENIOR_DEVELOPER_ESTIMATION.fieldApiName, type: 'currency' }, {label: 'Personal Manager Revenue', fieldName: PERSONAL_MANAGER_REVENUE.fieldApiName, type: 'currency'}, { label: 'Personal Manager (Estimation of Days)', ffieldName: PERSONAL_MANAGER_DAYS.fieldApiName, type: 'number' }, { label: 'Personal (Estimation of Total Revenue)', ffieldName: PERSONAL_MANAGER_ESTIMATION.fieldApiName, type: 'currency' }, { label: 'Overall (Estimation of Total Revenue)', ffieldName: TOTAL_ESTIMATION.fieldApiName, type: 'currency' }];export default class Requests extends LightningElement { columns = COLUMNS; @wire(getrfp) requests;}HTML
template><lightning-card><template if:true={requests.data}><lightning-datatable key-field="Name" data={requests.data} columns={columns}></lightning-datatable></template></lightning-card></template>Markup language
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"><apiVersion>48.0</apiVersion><isExposed>true</isExposed><targets><target>lightning__AppPage</target></targets></LightningComponentBundle>Please find the attached output. When I combined all the lwc components together, it did not look good. Could you all suggest me a layout?.
