<DropdownButton @text={{or @text "Columns"}} @icon={{or @icon "sliders-h"}} @type={{@type}} @size={{or @size "xs"}} @buttonClass={{@buttonClass}} @buttonWrapperClass={{@buttonWrapperClass}} @triggerClass={{@triggerClass}} @wrapperClass={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} ...attributes as |dd|>
    <div class="customize-columns-dropdown-container">
        <div class="customize-columns-dropdown-header justify-between">
            <h4>{{or @dropdownHeaderText "Customize Columns"}}</h4>
            <Button @text="Done" @icon="check" @type="primary" @size="xs" @onClick={{dropdown-fn dd this.applyChanges}} />
        </div>
        <div class="customize-columns-dropdown-body">
            <div class="grid grid-cols-3 lg:grid-cols-3 sm:grid-cols-1 gap-2 w-full">
                {{#each this.columnsWithLabels as |column|}}
                    <Checkbox @label={{column.label}} @value={{not column.hidden}} @onToggle={{fn this.selectColumn column}} />
                {{/each}}
            </div>
        </div>
    </div>
</DropdownButton>