Truncate TextColumn

Have anyone managed to make a

TextColumn

TextColumn

with a lot of content maximize the allowable space and add a

trunctate

trunctate

style (https://tailwindcss.com/docs/text-overflow#truncate) its content to prevent overflow?

We initially did

wrap()

wrap()

but we would realy love to see a

truncate()

truncate()

feature for the

TextColumn

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.

Truncate TextColumn

Have anyone managed to make a

TextColumn

TextColumn

with a lot of content maximize the allowable space and add a

trunctate

trunctate

style (https://tailwindcss.com/docs/text-overflow#truncate) its content to prevent overflow?

We initially did

wrap()

wrap()

but we would realy love to see a

truncate()

truncate()

feature for the

TextColumn

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.

Truncate TextColumn

Truncate TextColumn

Similar Threads

Similar Threads

Similar Threads