bpk-component-datatable

Backpack datatable component.

To migrate to @skyscanner/backpack-web v32, 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 alphanumerically using the value of the accessor. For use cases where the data in a column might more complex and requires custom sorting you can pass a sort function along with sortBy and sortDirection. This custom sort function will be applied to the column specified through the sortBy id.

                                                
                                                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.