Vertical Align Top for Lightning Datatable Subclass

Question

I have extended LightningDatatable:

export default class DispatchConsoleDataTable extends LightningDatatable {

   static customTypes = {

       smartCalendarCell: {
           template: calendarCell,
           standardCellLayout: false,
           typeAttributes: []
       }
   };
}

using this template:

<template>
    <c-dispatch-console-calendar-cell data-navigation="enable" cell-value={value}></c-dispatch-console-calendar-cell>
</template>

and this cell definition:

<template>
    <template for:each={cellArray} for:item="cell">
        <lightning-layout key={cell.Header} multiple-rows="true">
            <template if:true={cell.IsPM}>
                <lightning-layout-item size="6"></lightning-layout-item>
            </template>
            <lightning-layout-item size={cell.Size}>
                <lightning-formatted-text class={cell.Class} value={cell.Header}></lightning-formatted-text>
            </lightning-layout-item>
            <template if:true={cell.IsAM}>
                <lightning-layout-item size="6"></lightning-layout-item>
            </template>
            <template if:true={cell.HasFromTo}>
                <template if:true={cell.IsPM}>
                    <lightning-layout-item size="6"></lightning-layout-item>
                </template>
                <lightning-layout-item size={cell.Size}>
                    <lightning-formatted-text class={cell.Class} value={cell.FromTo}></lightning-formatted-text>
                </lightning-layout-item>
                <template if:true={cell.IsAM}>
                    <lightning-layout-item size="6"></lightning-layout-item>
                </template>
            </template>
        </lightning-layout>
    </template>
</template>

Everything is working fine except I would like to override the default vertical alignment of the cells, which seems to be center alignment:

Question: How do I change the vertical alignment for my custom cells to be "top"?

Thanks.

Answer 1

Unfortunately you cannot do this with lightning-datatable but it's worth an Idea on IdeaExchange.

Here's why:

• there's no attribute that exposes vertical alignment
• Shadow DOM prevents you from modifying this with CSS in your custom cell. You wouldn't be able to bypass the two LWC wrappers (lightning-primitive-custom-cell-factory and lightning-primitive-custom-cell) and other elements that are in the way to get to the parent th element.

Answer 2

@Dave C Try using padding css style, please find below which i tried.

For the purpose of explaining, i pushed the cell value to top and did not align center. In order to achieve the above, i gave padding-bottom:50px to push my content to the top of the cell. Also not sure if you tried margin:auto; top:0.

Let me know if the above solution helps!