Skip to content

Commit

Permalink
Merge pull request #400 from amit-webkul/doc-updates
Browse files Browse the repository at this point in the history
Added changes for datagrid column for master, 2.2, 2.1, and 2.0 branches.
  • Loading branch information
amit-webkul authored Sep 17, 2024
2 parents d489da3 + 13f2a72 commit 833cd07
Show file tree
Hide file tree
Showing 4 changed files with 346 additions and 30 deletions.
111 changes: 111 additions & 0 deletions docs/2.0/packages/datagrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -361,3 +361,114 @@ You can use these props to customize the appearance and behavior of the datagrid
By customizing the DataGrid directly in the Blade file, you won't affect your default DataGrid. This means you can display the same DataGrid with various appearances and customize it by writing simple Vue.js code and using Tailwind CSS (since we use it in Bagisto).
:::


## Available Column Types

Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: integer, string, boolean, date range, and dropdown types.

### Integer Column Type

The integer column type is designed for whole numbers without any fractional or decimal parts. This column type is ideal for counting or identification data. Used for IDs, quantities, and numeric fields that don’t require decimal places.


```php
$this->addColumn([
'index' => 'id',
'label' => trans('blog::app.admin.datagrid.index.id'),
'type' => 'integer',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### String Column Type

The string column type stores text or alphanumeric data. It’s widely used for columns that contain names, descriptions, or any textual information. Typically used for product names, customer names, categories, and descriptions.

```php
$this->addColumn([
'index' => 'name',
'label' => trans('blog::app.admin.datagrid.index.name'),
'type' => 'string',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Boolean Column Type

The boolean column type stores binary values such as true or false. It’s useful for indicating the state of a specific condition. Used for status flags like “active/inactive,” “available/unavailable,” or "enabled/disabled."

```php
$this->addColumn([
'index' => 'status',
'label' => trans('blog::app.admin.datagrid.index.status'),
'type' => 'boolean',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

This is a small example of status flags that can be set to either active or inactive. You can configure the status flags according to your requirements.


```php
$this->addColumn([
'index' => 'status',
'label' => trans('blog::app.admin.datagrid.index.status'),
'type' => 'boolean',
'searchable' => false,
'filterable' => true,
'sortable' => true,
'closure' => function ($value) {
if ($value->status) {
return '<span class="badge badge-md badge-success">'.trans('blog::app.admin.datagrid.index.status.active').'</span>';
}

return '<span class="badge badge-md badge-danger">'.trans('blog::app.admin.datagrid.index.status.inactive').'</span>';
},
]);
```

### Dropdown Column Type

When using the dropdown column type in Bagisto’s DataGrid, the following filterable options are supported to refine searches based on predefined choices from a dropdown menu. The dropdown filter allows users to select specific values from a list, making data filtering simple and precise. Inside the options are set based on the value of the dropdown type.

```php
$this->addColumn([
'index' => 'type',
'label' => trans('blog::app.admin.datagrid.index.type'),
'type' => 'dropdown',
'options' => [
'type' => 'basic',

'params' => [
'options' => collect(config('product_types'))
->map(fn ($type) => ['label' => trans($type['name']), 'value' => trans('blog::app.admin.datagrid.index.type.create.'.$type['key'])])
->values()
->toArray(),
],
],
'searchable' => false,
'filterable' => true,
'sortable' => true,
]);
```

### Date Column Type

The date column type stores dates, but without time information. It is useful when only the calendar date is important, such as in daily reports or event dates. Often used for birth dates, order dates, or specific event dates.

```php
$this->addColumn([
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date_range',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```
57 changes: 37 additions & 20 deletions docs/2.1/packages/datagrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ By customizing the DataGrid directly in the Blade file, you won't affect your de

## Available Column Types

Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: integer, string, boolean, date, datetime, and aggregate types.
Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: integer, string, boolean, date range, and dropdown types.

### Integer Column Type

Expand Down Expand Up @@ -412,45 +412,62 @@ $this->addColumn([
]);
```

### Date Column Type

The date column type stores dates, but without time information. It is useful when only the calendar date is important, such as in daily reports or event dates. Often used for birth dates, order dates, or specific event dates.
This is a small example of status flags that can be set to either active or inactive. You can configure the status flags according to your requirements.


```php
$this->addColumn([
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date',
'searchable' => true,
'filterable' => 'date_range',
'index' => 'status',
'label' => trans('blog::app.admin.datagrid.index.status'),
'type' => 'boolean',
'searchable' => false,
'filterable' => true,
'sortable' => true,
'closure' => function ($value) {
if ($value->status) {
return '<span class="badge badge-md badge-success">'.trans('blog::app.admin.datagrid.index.status.active').'</span>';
}

return '<span class="badge badge-md badge-danger">'.trans('blog::app.admin.datagrid.index.status.inactive').'</span>';
},
]);
```

### DateTime Column Type
### Dropdown Column Type

The datetime column type stores both date and time information. This is important when precise timestamps are needed. Used for tracking exact times for events like order creation, login timestamps, or last updated times.
When using the dropdown column type in Bagisto’s DataGrid, the following filterable options are supported to refine searches based on predefined choices from a dropdown menu. The dropdown filter allows users to select specific values from a list, making data filtering simple and precise. Inside the options are set based on the value of the dropdown type.

```php
$this->addColumn([
'index' => 'updated_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'datetime',
'searchable' => true,
'filterable' => 'datetime_range',
'index' => 'type',
'label' => trans('blog::app.admin.datagrid.index.type'),
'type' => 'dropdown',
'options' => [
'type' => 'basic',

'params' => [
'options' => collect(config('product_types'))
->map(fn ($type) => ['label' => trans($type['name']), 'value' => trans('blog::app.admin.datagrid.index.type.create.'.$type['key'])])
->values()
->toArray(),
],
],
'searchable' => false,
'filterable' => true,
'sortable' => true,
]);
```

### Aggregate Type Column
### Date Column Type

The aggregate column type is used for displaying summarized or calculated data, such as totals, averages, or counts derived from other data in the DataGrid. Used to display metrics like total sales, average order value, or product count in categories.
The date column type stores dates, but without time information. It is useful when only the calendar date is important, such as in daily reports or event dates. Often used for birth dates, order dates, or specific event dates.

```php
$this->addColumn([
'index' => 'total',
'label' => trans('blog::app.admin.datagrid.index.total'),
'type' => 'aggregate',
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date_range',
'searchable' => true,
'filterable' => true,
'sortable' => true,
Expand Down
108 changes: 101 additions & 7 deletions docs/2.2/packages/datagrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ By customizing the DataGrid directly in the Blade file, you won't affect your de

## Available Column Types

Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: float, integer, string, boolean, date, datetime, and aggregate types.
Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: decimal, integer, string, boolean, date, datetime, and aggregate types.

### Integer Column Type

Expand All @@ -460,15 +460,15 @@ $this->addColumn([
]);
```

### Float Column Type
### Decimal Column Type

The Float column type stores numbers with high precision, allowing fractional parts. It’s ideal for financial or measurement data where exact precision is necessary. Used for columns like product prices, weights, or tax rates that require float values.
The decimal column type stores numbers with high precision, allowing fractional parts. It’s ideal for financial or measurement data where exact precision is necessary. Used for columns like product prices, weights, or tax rates that require decimal values.

```php
$this->addColumn([
'index' => 'price',
'label' => trans('blog::app.admin.datagrid.index.price'),
'type' => 'float',
'type' => 'decimal',
'searchable' => true,
'filterable' => true,
'sortable' => true,
Expand All @@ -490,6 +490,68 @@ $this->addColumn([
]);
```

#### filterable options in string column type

When using the string column type in Bagisto’s DataGrid, the following filterable options are supported to help refine searches based on text data.

```php
$this->addColumn([
'index' => 'type',
'label' => trans('blog::app.admin.datagrid.index.type'),
'type' => 'string',
'filterable' => true,
'searchable' => true,
'filterable_type' => 'dropdown',
'filterable_options' => [
[
'label' => trans('blog::app.admin.datagrid.index.type.text'),
'value' => 'text',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.textarea'),
'value' => 'textarea',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.price'),
'value' => 'price',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.boolean'),
'value' => 'boolean',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.select'),
'value' => 'select',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.multiselect'),
'value' => 'multiselect',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.date-time'),
'value' => 'datetime',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.date'),
'value' => 'date',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.image'),
'value' => 'image',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.file'),
'value' => 'file',
],
[
'label' => trans('blog::app.admin.datagrid.index.type.checkbox'),
'value' => 'checkbox',
],
],
'sortable' => true,
]);
```

### Boolean Column Type

The boolean column type stores binary values such as true or false. It’s useful for indicating the state of a specific condition. Used for status flags like “active/inactive,” “available/unavailable,” or "enabled/disabled."
Expand All @@ -515,11 +577,27 @@ $this->addColumn([
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date',
'searchable' => true,
'filterable' => 'date_range',
'filterable' => true,
'sortable' => true,
]);
```

#### filterable type in Date column type

When using the date column type in Bagisto’s DataGrid, the following filterable type are supported to help refine searches based on text data. The filterable type is typically set to 'date_range', allowing users to search for records based on specific date ranges.

```php
$this->addColumn([
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date',
'searchable' => true,
'filterable' => true,
'filterable_type' => 'date_range',
'sortable' => true
]);
```

### DateTime Column Type

The datetime column type stores both date and time information. This is important when precise timestamps are needed. Used for tracking exact times for events like order creation, login timestamps, or last updated times.
Expand All @@ -530,11 +608,27 @@ $this->addColumn([
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'datetime',
'searchable' => true,
'filterable' => 'datetime_range',
'filterable' => true,
'sortable' => true,
]);
```

#### filterable type in Date Time column type

When using the date time column type in Bagisto’s DataGrid, the following filterable type are supported to help refine searches based on text data. The filterable type is typically set to 'datetime_range', allowing users to search for records based on specific date time ranges.

```php
$this->addColumn([
'index' => 'updated_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'datetime',
'filterable' => true,
'searchable' => true,
'filterable_type' => 'datetime_range',
'sortable' => true,
]);
```

### Aggregate Type Column

The aggregate column type is used for displaying summarized or calculated data, such as totals, averages, or counts derived from other data in the DataGrid. Used to display metrics like total sales, average order value, or product count in categories.
Expand All @@ -548,4 +642,4 @@ $this->addColumn([
'filterable' => true,
'sortable' => true,
]);
```
```
Loading

0 comments on commit 833cd07

Please sign in to comment.