Data Table Scrolling

Inkline's Data Table supports a large number of columns easily using horizontal scrolling and sticky columns.

export default {
    data() {
        return {
            columns: [
                { title: 'Name', path: 'name' },
                { title: 'Position', path: 'position' },
                { title: 'Age', path: 'age' },
                { title: 'City', path: 'address.city' },
                { title: 'Country', path: 'address.country' },
                { title: 'Email', path: 'email' }
            ],
            rows: [ ... ]
        }
    }
}

By default, sorting for the string, number and Date value types is supported natively.

Data Table Default Scrolling
Showentries
# Name Position Age City Country Email
1 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
2 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
3 Dinesh Chugtai Software Developer 30 Lahore Pakistan dinesh.chugtai@email.com
4 Jared Dunn Chief Operations Officer 35 Berlin Germany jared.dunn@email.com
5 Erlich Bachman Software Developer 32 Palo Alto United States erlich.bachman@email.com
6 Nelson Bighetti Software Developer 26 Stanford United States nelson.bighetti@email.com
7 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
8 Bertram Gilfoyle System Administrator 30 Toronto Canada bertram.gilfoyle@email.com
9 Dinesh Chugtai Software Developer 30 Lahore Pakistan dinesh.chugtai@email.com
10 Jared Dunn Chief Operations Officer 35 Berlin Germany jared.dunn@email.com
# Name Position Age City Country Email

Sticky Columns

By setting the sticky column property to true, you can easily make columns stick while scrolling horizontally.

export default {
    data() {
        return {
            columns: [
                { title: 'Name', path: 'name', sticky: true },
                { title: 'Email', path: 'email' },
                { title: 'Age', path: 'age' },
                ...
            ],
            rows: [ ... ]
        }
    }
}
Data Table Default Scrolling
Showentries
# Name Position Age City Country Email
1 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
2 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
3 Dinesh Chugtai Software Developer 30 Lahore Pakistan dinesh.chugtai@email.com
4 Jared Dunn Chief Operations Officer 35 Berlin Germany jared.dunn@email.com
5 Erlich Bachman Software Developer 32 Palo Alto United States erlich.bachman@email.com
6 Nelson Bighetti Software Developer 26 Stanford United States nelson.bighetti@email.com
7 Richard Hendricks Chief Executive Officer 26 Cupertino United States richard.hendricks@email.com
8 Bertram Gilfoyle System Administrator 30 Toronto Canada bertram.gilfoyle@email.com
9 Dinesh Chugtai Software Developer 30 Lahore Pakistan dinesh.chugtai@email.com
10 Jared Dunn Chief Operations Officer 35 Berlin Germany jared.dunn@email.com
# Name Position Age City Country Email