[Table] Add STableCellPills component

[ryo-gk]

We need a STableCellPills component that accepts string[] as value, and show them as pills.
This is because the STableCellPill which we already have can't show multiple pills.

Design image is below. ("Topic type" column)

The usage is like below.

const table = useTable({
  ...
  columns: {
    tags: {
      label: 'Tags',
      cell: {
        type: 'pills',
        pills(items, record) {
          return items.map((item) => {
            return {
              label: item,
              color: item === 'info' ? 'info' : 'mute'
            }
          })
        }
      },
  },
  records: [
    { ... , tags: ['Info', 'News'], ... },
    { ... , tags: ['Info'], ... },
  ],
  ...
})
  ...
})

Or, might be simpler to allow STableCellPill to accept also string[]?

[kiaking]

Or, might be simpler to allow STableCellPill to accept also string[]?

Yeah, it might 🤔 But however, I think we should make it accept an array of items and return pill objects so that we can have different colors depending on each value. This makes the API consistent with other type of cells.

So... maybe we should have a different API because the structure could be very different.

const table = useTable({
  ...
  columns: {
    tags: {
      label: 'Tags',
      cell: {
        type: 'pills',
        pills(items, record) {
          return items.map((item) => {
            return {
              label: item,
              color: item === 'info' ? 'info' : 'mute'
            }
          })
        }
      },
  },
  records: [
    { ... , tags: ['Info', 'News'], ... },
    { ... , tags: ['Info'], ... },
  ],
  ...
})

[ryo-gk]

So... maybe we should have a different API because the structure could be very different.

I see, it looks good the API you suggested!