julio.motol Posts - Answer Overflow

julio.motol

•Created by julio.motol on 7/12/2023 in #❓┊help

Truncate TextColumn

Have anyone managed to make a TextColumn with a lot of content maximize the allowable space and add a trunctate style (https://tailwindcss.com/docs/text-overflow#truncate) its content to prevent overflow? We initially did wrap() but we would realy love to see a truncate() feature for the TextColumn. With the current markup i can't see a quick way to implement and make a PR for so I'd like to know if there are others how have tried this. Right now, what we have as macro for this:

Tables\Columns\TextColumn::macro('truncate', function (string $size = 'md'): Tables\Columns\TextColumn {
    /** @var Tables\Columns\TextColumn $this */

    $this->formatStateUsing(function (string $state) use ($size): HtmlString {
        $cssClass = match ($size) {
            'xs' => 'max-w-xs',
            'sm' => 'max-w-sm',
            'md' => 'max-w-md',
            'lg' => 'max-w-lg',
            'xl' => 'max-w-xl',
            '2xl' => 'max-w-2xl',
            '3xl' => 'max-w-3xl',
            '4xl' => 'max-w-4xl',
            '5xl' => 'max-w-5xl',
            '6xl' => 'max-w-6xl',
            default => $size,
        };

        return new HtmlString(
            <<<html
                    <div class="truncate {$cssClass}">
                        {$state}
                    </div>
                html
        );
    });

    return $this;
});

Tables\Columns\TextColumn::macro('truncate', function (string $size = 'md'): Tables\Columns\TextColumn {
    /** @var Tables\Columns\TextColumn $this */

    $this->formatStateUsing(function (string $state) use ($size): HtmlString {
        $cssClass = match ($size) {
            'xs' => 'max-w-xs',
            'sm' => 'max-w-sm',
            'md' => 'max-w-md',
            'lg' => 'max-w-lg',
            'xl' => 'max-w-xl',
            '2xl' => 'max-w-2xl',
            '3xl' => 'max-w-3xl',
            '4xl' => 'max-w-4xl',
            '5xl' => 'max-w-5xl',
            '6xl' => 'max-w-6xl',
            default => $size,
        };

        return new HtmlString(
            <<<html
                    <div class="truncate {$cssClass}">
                        {$state}
                    </div>
                html
        );
    });

    return $this;
});

But this has a fixed constriant on the text shown. We really want a more responsive solution.

6 replies

Gaming

Programming