Add compact-mode

[alirezanet]

We had a lot of problems with VGT on mobile devices. so I decided to add a mobile-friendly feature to VGT.

---

Normal Mode:

---

Compact Mode:

please approve pull-request if you like it.

[p0psicles]

I also think you should update the docs in vp-docs

[alirezanet]

I also think you should update the docs in vp-docs

I've updated vp-docs too.

[alirezanet]

hmm, where is the project maintainer? is this repository still alive?
@xaksis

[p0psicles]

It kinda is. But I've also have been Waiting for a review for a couple of months now

[alirezanet]

a couple of months for a review!
I need this feature in production. today I had to remove VGT and use my own custom one, Although this is not a good idea. what should we do?

[p0psicles]

I would recommend to package it your self until merged. That's what I'm doing. Added my fork URL to the package.json. but I'm just running an open source hobby project.

If you have like nexus. Just publish it your self.

[xaksis]

@alirezanet @p0psicles thank you for your patience! This is now released as new minor version.

[alirezanet]

thanks.

[pixeldemon9]

Not sure if I'm missing something, but compactMode doesn't appear to be working/activating in my app or on the documentation page:
Docs

[alirezanet]

@pixeldemon9 In the documentations you are right, it is not showing compact-mode example, I think documentation is not using the latest version of the component. but if you are using the latest version of VGT on your application you should see the compacted grid in small screens like mobiles (it will be trigger in under 576px screens)

[pixeldemon9]

@alirezanet Discovered I was passing the prop as "compactMode" when it needed to be "compact-mode". Silly mistake on my part, although I think this is how it is presented in the documentation as well.

Thanks for this PR, I think this is an important option to handle tables on mobile.

[dashty94]

The table-column slot does not work in compactMode.

[alirezanet]

The table-column slot does not work in compactMode.

Ture. this is a design choice because usually we don't need that slot in compactMode,
what is your expected behavior ? (because there is not enough space in grid header in compact mode)

[dashty94]

The table-column slot does not work in compactMode.

Ture. this is a design choice because usually we don't need that slot in compactMode,

what is your expected behavior ? (because there is not enough space in grid header in compact mode)

Nothing critical. I had to translate the column labels based on the locale but I can also achieve that when setting the columns objects.