- Welcome
- Getting started
- Latest updates
- Monthly updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Infinite scroll
- Info Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
- Contributing
Data Table
Data tables are used for more advanced use cases. They take an array of data and automatically generate a table. Data tables support dynamically sorting rows.
Default
bpk-component-datatable
Backpack datatable component.
If you get the following warning BpkDataTableColumns is deprecated. Please pass an array of objects to the columns prop instead, see migration guide for details on how to migrate to the latest version of datatable.
Installation
Check the main Readme for a complete installation guide.
Usage
import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
const rows = [
{ name: 'Jose', description: 'Software Engineer' },
{ name: 'Rolf', description: 'Manager' }
]
const onRowClick = row => alert(JSON.stringify(row));
export default () => (
<BpkDataTable
rows={rows}
height={'12.5rem'}
onRowClick={onRowClick}
columns={
[
{
label: 'Name',
accessor: 'name',
width: '6.25rem',
},
{
label: 'Description',
accessor: 'description',
width: '6.25rem',
flexGrow: 1,
}
]}
/>
);
By default BpkDataTable sorts the column using the value of dataKey. For use cases where the data might more complex and requires custom sorting you can pass a sort function along with sortBy and sortDirection.
import { Fragment } from 'react';
import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
const complexRows = [
{
name: 'Jose',
description: 'Software Engineer',
seat: { office: 'London', desk: 10 },
},
{
name: 'Rolf',
description: 'Manager',
seat: { office: 'Barcelona', desk: 12 },
},
{
name: 'John',
description: 'Software Engineer',
seat: { office: 'Barcelona', desk: 15 },
},
];
let sortByValue = 'seat';
let sortDirectionValue = 'DESC';
const sortFunction = (rowA, rowB, id, desc) => {
const deskA = rowA.values.seat.desk;
const deskB = rowB.values.seat.desk;
if (deskA === deskB) {
return 0;
} else {
return deskA > deskB ? 1 : -1;
}
}
export default () => (
<BpkDataTable
rows={complexRows}
height={"12.5rem"}
sort={sortFunction}
sortBy={sortByValue}
sortDirection={sortDirectionValue}
columns={
[
{
label: 'Name',
accessor: 'name',
width: '6.25rem',
},
{
label: 'Description',
accessor: 'description',
width: '6.25rem',
},
{
label: 'Seat',
accessor: 'seat',
width: '6.25rem',
flexGrow: 1,
Cell: ({ cellData }) => (
<Fragment>
{cellData.office} - {cellData.desk}
</Fragment>
)}
]}
/>
);
Props
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Oct 2, 2023, 15:51