Giter Club home page Giter Club logo

filament-table-repeater's Introduction

Repeater Component in Table layout for Filament Package

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

This is a package for Filament form component. Extends from Repeater, but display in Table Layout.

image

image

Installation

You can install the package via composer:

composer require icetalker/filament-table-repeater

You can publish the views using

php artisan vendor:publish --tag="filament-table-repeater"

Usage

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form->schema([
        ...
        TableRepeater::make('items')
                ->relationship('items')
                ->schema([
                    Forms\Components\TextInput::make('product'),
                    ...
                ])
                ->reorderable()
                ->cloneable()
                ->collapsible()
                ->minItems(3)
                ->maxItems(5)
                ->columnSpan('full'),

    ]);
}

Since this component extends from Filament\Forms\Components\Repeater, you can use most of its methods, except for a few methods like inset(), grid(), columns().

Other methods

colStyles

To customize styles for each cell, you can pass an array of component name as key and css style as value to colStyles(). See example below:

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form->schema([
        ...
        Forms\Components\Grid::make(1)->schema([

            TableRepeater::make('items')
                ->relationship('items')
                ->schema([
                    Forms\Components\TextInput::make('product'),
                    Forms\Components\TextInput::make('quantity'),
                    ...
                ])
                ->colStyles([
                    'product' => 'color: #0000ff; width: 250px;',
                ]),

        ]),

    ]);
}

Besides, you can also pass a callback function to colStyles(). This may unlock more customization possibilities. See example below:

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form
        ->schema([
            ...
            Forms\Components\Grid::make(1)->schema([

                TableRepeater::make('items')
                    ->relationship('items')
                    ->schema([
                        Forms\Components\TextInput::make('product'),
                        Forms\Components\TextInput::make('quantity'),
                        ...
                    ])
                    ->colStyles(function(){
                        return [
                            'product' => 'color: #0000ff; width: 250px;',
                        ]
                    }),

            ]),

        ]);
}

Style customization

Besides the colStyles() method mentioned above, we use few css classes to provide extra ability for style customization. These classes were so called CSS "hook" classes. They are prefixed with it-(short for icetalker, which is the vendor name). Although we already have hook classes in old version, it's never been documented here. And for now, we rename these hook name by the new prefix it-:

  • it-table-repeater instead of filament-table-repeater in old version: As what you can tell from the class name, it allows you to customize the style for the whole table.
  • it-table-repeater-cell-label instead of filament-table-repeater-header-cell in old version: As what you can tell from the class name, it allows you to customize the style for the label of each column.
  • it-table-repeater-cell instead of filament-table-repeater-tbody-cell in old version: As what you can tell from the class name, it allows you to customize the style for the cell of each column.
  • it-table-repeater-row. This is new hook class, so that you can customize the style for each row.

You may add CSS to these classes in your app.css file, and filled with your own styles like this:

.it-table-repeater-cell-label {
    background-color: #fafafa;
}

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

filament-table-repeater's People

Contributors

icetalker avatar tubring avatar dependabot[bot] avatar github-actions[bot] avatar martinmildner avatar laravel-shift avatar invaders-xx avatar mvenghaus avatar ncavare avatar rawand201 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.