https://github.com/fouita/svelte-tw-data-table
Data table built with svelte and tailwindcss
https://github.com/fouita/svelte-tw-data-table
Last synced: 7 months ago
JSON representation
Data table built with svelte and tailwindcss
- Host: GitHub
- URL: https://github.com/fouita/svelte-tw-data-table
- Owner: fouita
- Created: 2020-09-12T12:51:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-20T16:58:56.000Z (over 5 years ago)
- Last Synced: 2025-05-10T08:01:56.314Z (about 1 year ago)
- Language: Svelte
- Size: 8.79 KB
- Stars: 27
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsive DataTable with svelte and tailwindcss
Responsive data-table built with svelte and tailwindcss
## Installation
```bash
$npm i @fouita/data-table -D
```
## Simple usage
To fill out the table you can add a simple json data and a head attribute to specify what to display.
```html
import DataTable from '@fouita/data-table'
const data = [
{
"first_name": "Wynn",
"last_name": "Donovan",
"company": "EMTRAK",
"email": "wynn.donovan@emtrak.io",
"phone": "+1 (809) 577-3968",
"address": "555 Freeman Street, Winesburg, New Jersey, 8986"
},
{
"first_name": "Arlene",
"last_name": "Cooley",
"company": "XUMONK",
"email": "arlene.cooley@xumonk.us",
"phone": "+1 (926) 459-2880",
"address": "659 Dupont Street, Lynn, West Virginia, 7173"
},
{
"first_name": "Jewell",
"last_name": "Sellers",
"company": "TECHADE",
"email": "jewell.sellers@techade.info",
"phone": "+1 (957) 456-2432",
"address": "955 Beekman Place, Waikele, Northern Mariana Islands, 341"
}
]
const head= {
first_name: 'First Name',
last_name: 'Last Name',
email: 'Email',
phone: 'Phone',
company: 'Company',
}
```
The above example does not show the attribute address because it's not included in the head. You can add a list of selection and update the head list dynamically if you want.
By adding `hover` we tell the table to change the background of the row when hovering.
## Stripped
by adding a `stripped` prop the table becames like the following
```html
```
## Customizing Header
We can customize the alignement of text, the background/text color of all/some columns.
By adding `_class` attribute inside the head we can change the style easily
```javascript
const head= {
first_name: 'First Name',
last_name: 'Last Name',
email: 'Email',
phone: 'Phone',
company: 'Company',
_class: 'bg-red-200 text-red-700'
}
```
To update the entire column we can attribute `_class` to the specific head property like the following
```javascript
const head= {
first_name: 'First Name',
last_name: 'Last Name',
email: 'Email',
phone: {value: 'Phone', _class: 'text-right bg-blue-200 text-blue-900'},
company: {value: 'Company', _class: 'text-left'},
_class: 'bg-red-200 text-red-700'
}
```
This will override the global head class style.
## Customizing rows/cells
We can customize rows and cells by also adding `_class` attribute inside the data
```javascript
const data = [
// ...
{
"first_name": "Arlene",
"last_name": "Cooley",
"company": "XUMONK",
"email": "arlene.cooley@xumonk.us",
"phone": "+1 (926) 459-2880",
"address": "659 Dupont Street, Lynn, West Virginia, 7173",
_class: 'bg-green-200 font-bold text-red-700 text-center'
},
// ...
]
```
It goes the same for specific cells like the follwing
```javascript
const data = [
// ...
{
"first_name": "Arlene",
"last_name": "Cooley",
"company": "XUMONK",
"email": "arlene.cooley@xumonk.us",
"phone": {
value: "+1 (926) 459-2880",
_class: 'text-white bg-green-600 p-5 border-2 border-red-600 text-center'
},
"address": "659 Dupont Street, Lynn, West Virginia, 7173",
_class: 'bg-green-200 font-bold text-red-700 text-center'
},
// ...
]
```
## Sort, Search and Pagination
To keep things simple, the sorting and pagination functions are custom depending on how you are planning to use the DataTable (with preloaded data or you prefer doing server request).
this is an example on how to use them.
### Data Sorting
```html
import DataTable from '@fouita/data-table'
let rows = [
{
"first_name": "Wynn",
"last_name": "Donovan",
"company": "EMTRAK"
},
{
"first_name": "Arlene",
"last_name": "Cooley",
"company": "XUMONK",
_class: 'bg-green-200 font-bold text-red-700 text-center'
},
{
"first_name": "Jewell",
"last_name": "Sellers",
"company": "TECHADE"
}
]
// define your sort function (call API if you like), it should return an object with 'asc' and 'desc' methods
const sortFn = (label) => {
return {
asc: () => {
rows = rows.sort((a,b) => a[label]>b[label] ? 1:-1)
},
desc: () => {
rows = rows.sort((a,b) => a[label]<b[label] ? 1:-1)
}
}
}
// add sort attribute in the column head and call the sort function
let head= {
first_name: {
value: 'First Name',
sort: sortFn('first_name')
},
last_name: {
value: 'Last Name',
sort: sortFn('last_name')
},
company: 'Company',
}
```
### Data search
For the search we can add an input that filter the data rows and return a filtred list, no big deal!
We can create a `Search.svelte` component like the following
```html
export let search = ''
import {SearchIcon} from 'svelte-feather-icons'
```
And then use it with the search function, we can use [Fuse](https://fusejs.io) for simple search
```html
import DataTable from '@fouita/data-table'
import Fuse from 'fuse.js/dist/fuse.min.js';
import Search from './Search.svelte'
const users = [
{
"first_name": "Wynn",
"last_name": "Donovan",
"company": "EMTRAK"
},
{
"first_name": "Arlene",
"last_name": "Cooley",
"company": "XUMONK",
_class: 'bg-green-200 font-bold text-red-700 text-center'
},
{
"first_name": "Jewell",
"last_name": "Sellers",
"company": "TECHADE"
}
]
const head= {
first_name: 'First Name',
last_name: 'Last Name',
company: 'Company'
}
let rows = users
let keywords = ''
const options = {
keys: ['first_name', 'last_name', 'company']
}
const fuse = new Fuse(rows, options)
let keywords=''
$: if(keywords){
// Call server here if you need server request
let result = fuse.search(keywords)
rows = result.map(r => r.item)
}
$: if(keywords==''){
rows = users
}
```
### Pagination
for the pagination you can checkout [Fouita Pagination](https://github.com/fouita/svelte-tw-pagination) and update the data each time you navigate (it's very simple!)
## About
[Fouita : UI framework for svelte + tailwind components](https://fouita.com)