@extends('layout.master') @push('plugin-styles') {!! Html::style('assets/css/tables/tables.css') !!} @endpush @section('content')

{{__('Basic Table')}}

{{__('For basic styling—light padding and only horizontal dividers—add the base class')}} .table to any <table>.


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}@fat
3 {{__('Larry')}} {{__('the Bird')}} {{__('@twitter')}}

{{__('Inverse Table')}}

{{__('You can also invert the colors—with light text on dark backgrounds—with ')}}.table-dark.


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}}Jacob {{__('Thornton')}} {{__('@fat')}}
3 {{__('Larry')}} {{__('the Bird')}} {{__('@twitter')}}

{{__('Table head options')}}

{{__('Use one of two modifier classes to make')}} <thead>s {{__('appear light or dark gray.')}}


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}
3 {{__('Larry')}} {{__('the Bird')}} {{__('@twitter')}}

{{__('Striped rows')}}

{{__('Use')}} .table-striped {{__('to add zebra-striping to any table row within the')}} <tbody>.


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}
3 {{__('Larry')}} {{__('the Bird')}} {{__('@twitter')}}

{{__('Bordered table')}}

{{__('Add')}} .table-bordered {{__('for borders on all sides of the table and cells.')}}


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Mark')}} {{__('Otto')}} {{__('@TwBootstrap')}}
3 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}
4 {{__('Larry the Bird')}} {{__('@twitter')}}

{{__('Hoverable Rows')}}

{{__('Create responsive tables by wrapping any ')}}.table in .table-responsive {{__('to make them scroll horizontally on small devices (under 768px).')}}


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}
3 {{__('Larry the Bird')}} {{__('@twitter')}}

{{__('Small table')}}

{{__('Add')}} .table-sm {{__('to make tables more compact by cutting cell padding in half.')}}


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} {{__('Otto')}} {{__('@mdo')}}
2 {{__('Jacob')}} {{__('Thornton')}} {{__('@fat')}}
3 {{__('Larry the Bird')}} {{__('@twitter')}}
4 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
5 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
6 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
7 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
8 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
9 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}

{{__('Contextual classes')}}

{{__('Use contextual classes to color table rows or individual cells.')}}


# {{__('Heading 1')}} {{__('Heading 2')}} {{__('Heading 3')}}
1 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
3 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
5 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
7 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}
9 {{__('Column content')}} {{__('Column content')}} {{__('Column content')}}

{{__('Captions')}}

{{__('A')}} caption {{__('functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.')}}


{{__('List of users')}}
# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 {{__('Mark')}} Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

{{__('Responsive Table')}}

{{__('Create responsive tables by wrapping any')}} .table in .table-responsiveto {{__('make them scroll horizontally on small devices (under 768px).')}}


# {{__('First Name')}} {{__('Last Name')}} {{__('Username')}}
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

{{__('Table with a dropdown')}}

{{__('Name')}} {{__('Place')}} {{__('Status')}} {{__('Action')}}
Shaun Sydney {{__('Approved')}}
Alma Zurich {{__('Working')}}
Praveen Kolkata {{__('Suspended')}}
Santos Rio {{__('Hi')}}Blocked
Chris Barbados {{__('On leave')}}

{{__('Table with a footer')}}

{{__('First Name')}} {{__('Last Name')}} {{__('Username')}} {{__('Action')}}
Mark Otto @mdo
Jacob Thornton @fat
Larry Bird @twitter
Vince Roy @vroy
{{__('FIRST NAME')}} {{__('LAST NAME')}} {{__('USERNAME')}} {{__('ACTION')}}

{{__('Table with options')}}

{{__('Name')}}
{{__('Date')}}
{{__('Progress')}}
{{__('Team')}}
{{__('Status')}}
{{__('Rating')}}
{{__('Action')}}
{{__('Android App Development')}} {{__('Jun 20, 2018')}}
avatar avatar avatar +4
{{__('Ongoing')}}
5 star
{{__('Angular Frontend')}} Aug 23, 2019
avatar avatar avatar +2
{{__('Hold')}}
4 star
{{__('Java Backend')}} {{__('Feb 20, 2018')}}
avatar avatar avatar +9
{{__('Completed')}}
4 star
{{__('AWS Server Migration')}} {{__('Sep 20, 2018')}}
avatar avatar avatar
{{__('Pending')}}
1 star
{{__('Firbase Backup')}} {{__('Jan 20, 2020')}}
avatar avatar
{{__('Cancelled')}}
2 star
{{__('iOS Swift')}} {{__('Jun 20, 2017')}}
avatar avatar avatar +5
{{__('Ongoing')}}
4 star
@endsection @push('plugin-scripts') @endpush @push('custom-scripts') @endpush