feat(table): add option to control display count of avatars (#416)

[kiaking]

• close [Table] Add feature to control how many avatars should be shown in STableCellAvatars #416

Now we can control how many avatars do we wanna show on table cell. We can also set count to 0 to hide avatars or names.

const table = useTable({
  columns: {
    authors: {
      label: 'Authors',
      cell: (authors) => ({
        type: 'avatars',
        avatars: authors,
        avatarCount: 5,
        nameCount: 3
      })
    }
  }
})

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	b8fb9a1
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/6581569b034eeb00089d33f4
😎 Deploy Preview	https://deploy-preview-417--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	b8fb9a1
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/6581569b2f5e7b0008f69757
😎 Deploy Preview	https://deploy-preview-417--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brc-dd]

LGTM. The empty box is looking weird though 👀 Can we do something like this instead?

(change that margin-left to right and z-index thing? and add count there in box?)

[NozomuIkuta]

LGTM.

By the way, I agree with @brc-dd's suggestion.

[kiaking]

Yeah this might work. Font size have to be quite small but I guess it's readable 🤔

In this case, maybe we should change the name suffix to John, and more instead of John, +2? Or Jonh ...

[kiaking]

I think this would work. Looks a bit like it got trimmed... but 🤔 What do you think,

[brc-dd]

yeah looks better I guess

[brc-dd]

We can play around with margins if you want it more compact. For example, this is what github's look like (-11px margin for 20px img):

It hides almost whole avatar though 😅

[kiaking]

Haha, yeah this is tough one. Also GitHub avatars keep squashing as numbers grow. Somewhat interesting way to handle the "+1" part I think 👀

I guess we can keep it as-is. I think it is more important to show the full avatars so that we can recognize who those are 😳

[brc-dd]

sounds good.