SIMPLE TAILWIND TABLE FOR REACT

It's easy to make an table with tailwind styles

Live demo here

Feature planing

• [ ] Support header drag and drop
• [ ] Support sticky more columns
• [ ] Support global header's row and body's row theme

Usage

1. Install

    npm install react-simple-tailwind-table

OR

    yarn add react-simple-tailwind-table

2.Import library into to your source

Edit tailwind.config.js and add into content

// tailwind.config.js
module.exports = {
  content: [
    // Add this
    './node_modules/react-simple-tailwind-table/**/*.{html,js,ts,css,scss}',
  ],
  // Add this
  safelist: [{ pattern: /rounded-./ }],
};

Add it into components

// Import style
import 'react-simple-tailwind-table/build/style.css';

import { useTableConfiguration, TailwindTable } from 'react-simple-tailwind-table';

3.Declare your configuration with hook

const temp = [
  { name: 'CRIS', status: 'DONE', score: 1000 },
  { name: 'NIDA', status: 'DONE', score: 200 },
  { name: 'TEEL', status: 'DOING', score: 450 },
  { name: 'LOUS', status: 'DOING', score: 800 },
  { name: 'JAN', status: 'PENDING', score: 0 },
];

const { tableData, tableColumns } = useTableConfiguration(temp, [
  {
    label: 'Username',
    accessor: 'name',
    body: { className: 'font-bold text-gray-600' },
    header: { background: '#345543', className: 'text-white' },
    align: 'left',
  },
  {
    label: 'Status',
    accessor: 'status',
    body: { className: 'px-2' },
    renderData: (data) => {
      const color = {
        DONE: 'text-green-500',
        DOING: 'text-orange-600',
        PENDING: 'text-gray-500',
      };
      return <span className={color[data.status]}>{data.status}</span>;
    },
  },
  { label: 'Score', accessor: 'score', sort: (a, b) => a.score - b.score },
]);

4. Render your table

<TailwindTable data={tableData} columns={tableColumns} />

Difference (OPTIONAL)

/**
 * Different each rows
 * difference:
 *  - enable: boolean, default is true
 *  - offset: different offset, 0.0 <> 1.0, higher -> darker
 */
<TailwindTable data={tableData} columns={tableColumns} differnce={{ enable: false }} />

Columns configuration

interface ITableColumn<T = undefined> {
  /**
   * Label in header
   */
  label: string;

  /**
   * Key of value in data
   */
  accessor?: Partial<keyof T>;

  /**
   * Width of column
   */
  width?: CSSProperties['width'];

  /**
   * Content align in column
   */
  align?: CSSProperties['textAlign'];

  /**
   * Custom render content
   */
  renderData?: (data: T, tableState?: ITableState<T>) => ReactNode;

  /**
   * Custom render header
   */
  renderHeader?: (tableState?: ITableState<T>) => ReactNode;

  /**
   * Sort method of this column, return score for normal array sort method
   */
  sort?: TTableSortFn<T>;

  /**
   * Extra config for body
   */
  body?: {
    className?: string;
    background?: CSSProperties['background'];
  };

  /**
   * Extra config for header
   */
  header?: {
    className?: string;
    background?: CSSProperties['background'];
    /**
     * Animation btn when hover or active (For sortable column)
     * @default: `hover:scale-105 active:scale-95 p-3`
     */
    buttonClass?: string;
  };

  filter?: {
    show?: boolean;
    dotColor?: string;
    /**
     * Custom render of filtered dot
     */
    render?: (tableState: ITableState<T>) => ReactNode;
  };
}

Technologies

• Typescript
• SCSS
• React
• Jest
• Rollup
• Storybook

Maintainer

@saintno