<template>
<div class="slds-m-top_xx-small slds-p-bottom_small">
<lightning-input type="text" placeholder={searchPlaceholder} onchange={filterRows}></lightning-input>
</div>
<div style={tableStyle} class={cssClass}>
<template if:false={isGettingIcons}>
<lightning-datatable key-field={keyField} data={dataForTable} columns={columns} onrowselection={onRowSelection}
column-widths-mode={columnWidthsMode} default-sort-direction={defaultSortDirection}
draft-values={draftValues} enable-infinite-loading={enableInfiniteLoading} errors={errors}
hide-checkbox-column={hideCheckboxColumn} hide-table-header={hideTable} is-loading={isLoading}
load-more-offset={loadMoreOffset} max-column-width={maxColumnWidth} max-row-selection={maxRowSelection}
min-column-width={minColumnWidth} resize-column-disabled={resizeColumnDisabled} resize-step={resizeStep}
row-number-offset={rowNumberOffset} selected-rows={selectedRows}
show-row-number-column={showRowNumberColumn} sorted-by={sortedBy} sorted-direction={sortedDirection}
suppress-bottom-bar={suppressBottomBar} wrap-text-max-lines={wrapTextMaxLines}>
</lightning-datatable>
</template>
<template if:true={isGettingIcons}>
<lightning-spinner alternative-text="Loading Icons"></lightning-spinner>
</template>
</div>
</template>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter