@use-morph/ui v0.4.23

@use-morph/ui

Components

DataTable

• 0.3.0-beta.1 ... とりあえずシングルエントリのコンポーネントとして。

Features

• Infinite Scroll
• Virtual Scroll
• [] Column Resizing
• [] Composed Components

Props

export type DataTableProps<Row> = {
  columns: DataTableColumnDef<Row>[];
  data: Row[];
  onReachedBottom?: () => void;
  onReachedTop?: () => void;
  bottomReachedThreshold?: number;
  topReachedThreshold?: number;
};

Usage

import { DataTable } from '@use-morph/ui';
import '@use-morph/ui/css';

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'department', header: 'Department' },
  { accessorKey: 'position', header: 'Position' },
  { accessorKey: 'age', header: 'Age' },
];

const MyComponent () => {

  return (
    <div style={{ width: '400px', height: '400px' }}>
      <DataTable
        data={employees}
        columns={columns}
        onReachedBottom={() => console.log('onReachedBottom')}
        onReachedTop={() => console.log('onReachedTop')}
      />
    </div>
  );
}

LoadingSpinner

Usage

import { LoadingSpinner } from '@use-morph/ui';
import '@use-morph/ui/css';

const MyComponent () => {

  return (
    <div>
      <LoadingSpinner className='w-6 h-6 text-gray-500' />
    </div>
  );
}