@alfanjauhari/extended-react-table v0.1.5

Extended React Table

Features

• Drag and Drop columns order (with power of local storage)
• Easy to customize
• Extensible
• Zero configuration

Get Started

Installation

Run npm install @alfanjauhari/extended-react-table or yarn add @alfanjauhari/extended-react-table (if you using yarn) on your terminal or command prompt.

Examples

Usage in Next.JS

If you use Next.JS v <= 11

1. Add "plugins": [["styled-components", { "ssr": true }]] to your babel config
2. Add code below to pages/_document.js

```javascript
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}
```
or if you use TypeScript, add this code to your `pages/_document.tsx`
```typescript
import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
```

If you use Next.JS v > 11 (SWC)

You just need to add code below to your next.config.js and create _document.{tsx,js} using code above

// next.config.js
module.exports = {
  compiler: {
    styledComponents: true,
  },
};

TODO

• Virtual table
• Sticky
• etc.