Skip to main content

    SortableTable

    Code:

    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: 'Joe',
            email: 'joe@joe.com',
            message:'Hello',
            rowClass: 'class'
          },
          {
            id: 2,
            name: 'Bob',
            email: 'bob@bob.com',
            message:'Hola',
            rowClass: 'class'
          },
          {
            id: 3,
            name: 'Tom',
            email: 'tom@tom.com',
            message:"What's Up",
            rowClass: 'class'
          }
        ]
      }
    />
    

    Rendered Component

    NameEmailMessage
    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.
    fieldsarrayOfrequirednoneMappings of header labels to properties on the objects in `data`.
    dataarrayOfrequirednoneEach object represents data for a row. An optional class may be provided to style specific rows.
    onSortfuncoptionalnone
    classNamestringoptionalnone