[WIP] 🧪 Experimental Table

[matheusps]

What is the purpose of this pull request?

WIP

What problem is this solving?

Related issue #716

How should this be manually tested?

See in action on this PR

You can also clone the repository, start the styleguidist using cd styleguide && yarn install && yarn start and navigate to Experimental/Table section.

Screenshots or example usage

Let's suppose that you have a custom component called AwesomeComponent that should have a field with autocomplete.

The code would be something like:

import { Table, useAutocomplete } from 'vtex.styleguide'
import  AwesomeComponent from './'

function YourUseCase(props) {

  const shema = { ... }
  const items = { ... }

  const density = {
    buttonLabel: 'Line Density',
    lowOptionLabel: 'Low',
    mediumOptionLabel: 'Medium',
    highOptionLabel: 'High',
  }

 const fields = {
    label: 'Toggle Visible Fields',
    showAllLabel: 'Show All',
    hideAlllLabel: 'Hide All',
  }
  
  const inputSearch  = useAutocomplete(...)

  return (
    <Table schema={schema} items={items} toolbar={inputSearch, density, fields} />
  )
}

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Requires change to documentation, which has been updated accordingly.

[kevinch]

This behavior has to be discussed with the Styleguide/design team in order to move on.

[tasgmaia]

Just to be sure. There is any changes on the current experience pattern or it is just a refactor on to test a compound component?

[tasgmaia]

@matheusps what about this PR?

[matheusps]

@TasGuerciMaia I am closing it. I'll be working step-by-step (feature-like) with the first being this PR so that I can keep PR's smaller than the current one.