Docs Menu

Tables

Tables have the following properties:

Property Required? Type Options Description
headBg no string
  • null (default)
  • warning
  • success
  • info
  • notice
 Background color of the Table's Head.
id no string Value of the id attribute for the Table.
outerBorder no string Color of the Outer Border. Also sets the theme for the table.

Basic Examples
Basic Switch example. 

            
 1<x-fcui-table>
 2    <x-slot:head>
 3        <th scope="col" class="font-medium px-6 py-4 text-left">
 4            ID
 5        </th>
 6        <th scope="col" class="font-medium px-6 py-4 text-left">
 7            Name
 8        </th>
 9        <th scope="col" class="font-medium px-6 py-4 text-left">
10            Email
11        </th>
12        <th scope="col" class="font-medium px-6 py-4 text-left">
13            Status
14        </th>
15    </x-slot:head>
16 
17    <x-slot:rows>
18        <x-fcui-table-row>
19            <td class="px-6 py-4 whitespace-nowrap">
20                1
21            </td>
22            <td class="font-light px-6 py-4 whitespace-nowrap">
23                Mark
24            </td>
25            <td class="font-light px-6 py-4 whitespace-nowrap">
26                Otto
27            </td>
28            <td class="font-light px-6 py-4 whitespace-nowrap">
29                @mdo
30            </td>
31        </x-fcui-table-row>
32    </x-slot:rows>
33 
34</x-fcui-table>
ID Name Email Status
1 Mark mark@example.com Active

Advanced Example
Table with a success type and an id. 

            
 1<x-fcui-table headBg="success" id="table1">
 2    <x-slot:head>
 3        <th scope="col" class="font-medium px-6 py-4 text-left">
 4            ID
 5        </th>
 6        <th scope="col" class="font-medium px-6 py-4 text-left">
 7            Name
 8        </th>
 9        <th scope="col" class="font-medium px-6 py-4 text-left">
10            Email
11        </th>
12        <th scope="col" class="font-medium px-6 py-4 text-left">
13            Status
14        </th>
15    </x-slot:head>
16 
17    <x-slot:rows>
18        <x-fcui-table-row rowStyle="success">
19            <td class="px-6 py-4 whitespace-nowrap">
20                1
21            </td>
22            <td class="font-light px-6 py-4 whitespace-nowrap">
23                Mark
24            </td>
25            <td class="font-light px-6 py-4 whitespace-nowrap">
26                mark@example.com
27            </td>
28            <td class="font-light px-6 py-4 whitespace-nowrap">
29                Active
30            </td>
31        </x-fcui-table-row>
32 
33        <x-fcui-table-row rowStyle="success">
34            <td class="px-6 py-4 whitespace-nowrap">
35                1
36            </td>
37            <td class="font-light px-6 py-4 whitespace-nowrap">
38                Mark
39            </td>
40            <td class="font-light px-6 py-4 whitespace-nowrap">
41                mark@example.com
42            </td>
43            <td class="font-light px-6 py-4 whitespace-nowrap">
44                Active
45            </td>
46        </x-fcui-table-row>
47    </x-slot:rows>
48 
49</x-fcui-table>
ID Name Email Status
1 Mark mark@example.com Active
2 Tom tom@example.com Inactive