Skip to main content

    SortableTable

    Code:

    import React from 'react'
    import SortableTable from '@department-of-veterans-affairs/formation-react/SortableTable'
    
    <SortableTable
      className='va-table'
      currentSort={{
        value: 'String',
        order: 'ASC',
      }}
      fields={
        [
          {
            label: 'Name',
            value: 'name'
          },
          {
            label: 'Email',
            value: 'email'
          },
          {
            label: 'Message',
            value: 'message'
          }
        ]
      }
      data={
        [
          {
            id: 1,
            name: <span>Joe</span>,
            email: 'joe@joe.com',
            message:'Hello',
            rowClass: 'class'
          },
          {
            id: 2,
            name: <span>Bob</span>,
            email: 'bob@bob.com',
            message:'Hola',
            rowClass: 'class'
          },
          {
            id: 3,
            name: <span>Tom</span>,
            email: 'tom@tom.com',
            message:"What's Up",
            rowClass: 'class'
          }
        ]
      }
      onHeaderClick={(value, order) => {}}
    />
    

    Rendered Component

    Joejoe@joe.comHello
    Bobbob@bob.comHola
    Tomtom@tom.comWhat's Up

    Props:

    Prop NameTypeIs RequiredDefault ValueDescription
    currentSortshaperequirednoneField value to sort by in either ascending or descending order. The `value` must be one of the values in the `fields` prop.
    fieldsarrayOfrequirednone
    dataarrayOfrequirednoneEach object represents data for a row. An optional class may be provided to style specific rows.
    onHeaderClickfuncoptional() => {}
    classNamestringoptionalnone


    Edit this page on GitHub