Vue Tan Table

A Vue 3 table component powered by TanStack Table

For Nuxt 3+ documentation click here

Installation

pnpm add @bryceandy/vue-tan-table

Configuration

You can customize the table using a variety of options.

1. Using configurations on component registration;

import { createApp } from 'vue';
import App from './App.vue';
import { VueTanTable } from '@bryceandy/vue-tan-table';
import '@bryceandy/vue-tan-table/dist/vue-tan-table.css';

createApp(App)
  .use(VueTanTable, {
    primaryColor: '#ff6600',
    pagination: {
      // string of HTML content or a vue component
      prevIcon: '<-',
      nextIcon: '->',
    }
  })
  .mount('#app');

// DataTable will be available without importing
<template>
  <DataTable :data="data" :columns="columns" />
</template>

2. Using configurations manually at runtime

<script setup>
import { DataTable, configureVueTanTable } from '@bryceandy/vue-tan-table'
import '@bryceandy/vue-tan-table/dist/vue-tan-table.css'

configureVueTanTable({
  primaryColor: '#0099ff',
  pagination: false
})
</script>

Usage

<script setup>
import { DataTable } from '@bryceandy/vue-tan-table'
import '@bryceandy/vue-tan-table/dist/vue-tan-table.css'

const columns = [
  { header: 'Name', accessorKey: 'name' },
  { header: 'Age', accessorKey: 'age' }
]
const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]
</script>

<template>
  <DataTable :data :columns :remote-data="false" />
</template>

API

VueTanTable Configuration

interface VueTanTableConfig {
  primaryColor?: string
  pagination?: VueTanTablePaginationConfig | false
}

interface VueTanTablePaginationConfig {
  prevIcon?: string | Component
  nextIcon?: string | Component
  ariaLabels?: {
    previous?: string
    next?: string
    page?: (page: number) => string
  }
}

DataTable Props

interface DataTableProps {
  data: TData[]
  columns: ColumnDef<TData, TValue>[]
  pageCount?: number
  pageSize?: number
  paginationState?: PaginationState
  sortingState?: SortingState
  filtersState?: ColumnFiltersState
  rowSelectionState?: RowSelectionState
  getRowId?: (row: TData) => string
  onPaginationChange?: OnChangeFn<PaginationState>
  onSortingChange?: OnChangeFn<SortingState>
  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
  onRowSelectionChange?: OnChangeFn<RowSelectionState>
  remoteData?: boolean
}

|Prop | Details | |:---|:---| | data | An array of objects containing the data to be rendered. When remoteData is set to true, only list the items of a particular page coming from your API. | | columns | An array of column definitions using Tanstack Table's API | | pageCount | An integer value used with remoteData to let the component aware how many items are from your API | | pageSize | The number of items to be rendered on your table per page. Default is 10. | | paginationState | When using remoteData you provide this ref in order to take control of pagination and make API calls when state changes. | | sortingState | When using remoteData you provide this ref in order to take control of your sorting and apply API sorting parameters when state changes. | | filtersState | When using remoteData you provide this ref in order to take control of your filtering and apply API filtering parameters when state changes. | | rowSelectionState | Provide this ref when you want to track state changes of row-selection | | getRowId | A function to determine the unique column that may be used for row-selection. It should return the string format of the column from the row object property | | onPaginationChange | Callback used with remoteData to manually update pagination state and side-effects | | onSortingChange | Callback used with remoteData to manually update sorting state and side-effects | | onColumnFiltersChange | Callback used with remoteData to manually update filter state and side-effects | | onRowSelectionChange | Callback to handle changes after row-selection state updates | | remoteData | Boolean value to indicate whether data comes from a remote source or local |

Examples

Visit the examples folder to find simple to complex usages.

All the examples can be visualized on the library documentation.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you'd like to start there.

How to Contribute

1. Fork the repository
2. Clone you fork:

git clone https://github.com/bryceandy/vue-tan-table.git

3. Create a branch for your feature/fix:

git checkout -b feature/awesome-feature

4. Make your changes, add unit tests and commit. For the core vue library changes will be made in the packages/core directory:

git commit -m '[Core] Add awesome feature'

5. Push your branch:

git push origin feature/awesome-feature

6. Open a pull request.

Guidelines

• Follow the existing code style and conventions
• Write clear commit messages
• Add/update tests if applicable
• Keep pull requests small and focused