Filament•2y ago

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.

Text Overflow - Tailwind CSS

Utilities for controlling text overflow in an element.

5 Replies

Husky110•2y ago

I'm going via substr and then display the full content on a tooltip. Might be an idea aswell...

julio.motolOP•2y ago

We've thought of that too, but personally, i don't want to cut the string short. A full content may fit well on a 1920px width display but may not on a 1366px. We'd really want truncate to work for us in order to maximize the space available. However we do understand that it is a horizontal scroll is inevitable for smaller resolutions. Our plan for that is to set a min-w-* for that column.

Husky110•2y ago

Okay - well: As far as I understand "truncating" that is in effect done in PHP via substr... Might be missing something here. Can you provide a visual example of what you are trying to acchieve?

julio.motolOP•2y ago

Im referring to the tailwind class (https://tailwindcss.com/docs/text-overflow#truncate) sorry for notmaking it clear, I'll update the post.

Text Overflow - Tailwind CSS

Utilities for controlling text overflow in an element.

awcodes•2y ago

Honestly, i think your solution is fine considering this is in a table. Personally, I would do it as a custom column instead of a macro though.

Gaming

Programming

Truncate TextColumn