@syook/react-tabulous 4.0.3 → 4.0.5

package/README.md

@@ -2,7 +2,7 @@
 
 ## Installation
 
-To use in your own project, install it via npm package.
+To use in your own project, install it via [npm package](https://www.npmjs.com/package/@syook/react-tabulous).
 
 `npm i @syook/react-tabulous`
 

package/lib/index.d.ts

@@ -0,0 +1,334 @@
+import React$1, { ReactNode } from 'react';
+
+type NativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions';
+type ColumnType = NativeColTypes | string;
+
+type GridRowId = string | number;
+type GridValidRowModel = Record<string, any>;
+
+interface GridPinnedColumns {
+    left?: string[];
+    right?: string[];
+}
+type GridColumnPinningState = GridPinnedColumns;
+declare enum GridPinnedPosition {
+    left = "left",
+    right = "right"
+}
+/**
+ * The column pinning API interface that is available in the grid [[apiRef]].
+ */
+interface GridColumnPinningApi {
+    /**
+     * Pins a column to the left or right side of the grid.
+     * @param {string} field The column field to pin.
+     * @param {GridPinnedPosition} side Which side to pin the column.
+     */
+    pinColumn: (field: string, side: GridPinnedPosition) => void;
+    /**
+     * Unpins a column.
+     * @param {string} field The column field to unpin.
+     */
+    unpinColumn: (field: string) => void;
+    /**
+     * Returns which columns are pinned.
+     * @returns {GridPinnedColumns} An object containing the pinned columns.
+     */
+    getPinnedColumns: () => GridPinnedColumns;
+    /**
+     * Changes the pinned columns.
+     * @param {GridPinnedColumns} pinnedColumns An object containing the columns to pin.
+     */
+    setPinnedColumns: (pinnedColumns: GridPinnedColumns) => void;
+    /**
+     * Returns which side a column is pinned to.
+     * @param {string} field The column field to check.
+     * @returns {string | false} Which side the column is pinned or `false` if not pinned.
+     */
+    isColumnPinned: (field: string) => GridPinnedPosition | false;
+}
+interface GridColumnPinningInternalCache {
+    /**
+     * Stores the fields in their original position, before being pinned.
+     */
+    orderedFieldsBeforePinningColumns: string[] | null;
+}
+
+type GridActionsCellItemProps = {
+    label: string;
+    icon?: React.ReactElement;
+} & ({
+    showInMenu?: false;
+    icon: React.ReactElement;
+} | {
+    showInMenu: true;
+});
+
+type ValueType = string | number | boolean;
+interface OptionInterface {
+    value: ValueType;
+    label: string | number;
+}
+
+interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> {
+    /**
+     * The column identifier. It's used to map with [[GridRowModel]] values.
+     */
+    field: string;
+    /**
+     * The title of the column rendered in the column header cell.
+     */
+    headerName: string;
+    /**
+     * Get the values to be displayed in the table cell.
+     */
+    valueGetter?: (row: any, index?: number) => string | number | boolean;
+    /**
+     * The cell which has JSX will be displayed.
+     */
+    renderCell?: HTMLElement | JSX.Element | Element | ((row: any, index: number) => JSX.Element);
+    /**
+     * The description of the column rendered as tooltip if the column header name is not fully displayed.
+     */
+    description?: string;
+    /**
+     * The column is visible or not.
+     */
+    isVisible?: boolean;
+    /**
+     * Type allows to merge this object with a default definition [[GridColDef]].
+     * @default 'string'
+     */
+    type?: ColumnType;
+    /**
+     * Allows column to pin.
+     * @default null
+     */
+    pinned?: GridPinnedPosition | null;
+    /**
+     * Allows column to set width.
+     * @default 'max-content'
+     */
+    width?: number | string;
+    /**
+     * The column to search or not.
+     */
+    isSearchable?: boolean;
+    /**
+     * The column to sortable or not.
+     */
+    isSortable?: boolean;
+    /**
+     * The column to sortable or not.
+     */
+    isFilterable?: boolean;
+    /**
+     * The column to show options in filter.
+     */
+    options?: OptionInterface[];
+}
+interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
+    /**
+     * Type allows to merge this object with a default definition [[GridColDef]].
+     * @default 'actions'
+     */
+    type: 'actions';
+    /**
+     * Function that returns the actions to be shown.
+     * @param {GridRowParams} params The params for each row.
+     * @returns {React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
+     */
+    getActions: () => Array<React.ReactElement<GridActionsCellItemProps>>;
+}
+type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F>;
+
+/**
+ * Available densities.
+ */
+type GridDensity = 'compact' | 'standard' | 'comfortable';
+
+type GridSortDirection = 'asc' | 'desc' | null | undefined;
+
+interface Logger {
+    debug: (...args: any[]) => void;
+    info: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+}
+
+interface FilterFieldProps {
+    condition: string;
+    column: string;
+    type: 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect';
+    operator: string;
+    value: any;
+    field: string;
+    options?: string[];
+}
+
+interface DataGridPropsWithDefaultValues {
+    data: any;
+    rootData: [];
+    filteredAndSortedData: [];
+    defaultPageSize: number;
+    columns: GridColDef[];
+    density: GridDensity;
+    emptyPlaceholder: string;
+    loading: boolean;
+    page: number;
+    pageSizeOptions: number[];
+    sortingOrder: GridSortDirection[];
+    sortField: string;
+    sortFieldType: string;
+    sortBy: GridSortDirection;
+    logger: Logger;
+    showColumnToolbar: boolean;
+    showFilterToolbar: boolean;
+    isShowSerialNumber: boolean;
+    searchKeys: string[];
+    searchText: string;
+    /**
+     * If `true`, column filters are disabled.
+     * @default false
+     */
+    disableColumnFilter: boolean;
+    /**
+     * If `true`, the column menu is disabled.
+     * @default false
+     */
+    disableColumnMenu: boolean;
+    /**
+     * If `true`, the column pinning is disabled.
+     * @default false
+     */
+    disableColumnPinning: boolean;
+    /**
+     * If `true`, reordering columns is disabled.
+     * @default false
+     */
+    disableColumnReorder: boolean;
+    /**
+     * If `true`, resizing columns is disabled.
+     * @default false
+     */
+    disableColumnResize: boolean;
+    /**
+     * If `true`, hiding/showing columns is disabled.
+     * @default false
+     */
+    disableColumnSelector: boolean;
+    /**
+     * If `true`, the density selector is disabled.
+     * @default false
+     */
+    disableDensitySelector: boolean;
+    /**
+     * If `true`, sorting with multiple columns is disabled.
+     * @default false
+     */
+    disableMultipleColumnsSorting: boolean;
+    /**
+     * If `true`, quick search will be disabled.
+     * @default false
+     */
+    disableSearch: boolean;
+    /**
+     * If `true`, export will be disabled.
+     * @default false
+     */
+    disableColumnExport: boolean;
+    /**
+     * If `true`, there won't be any footer or pagination.
+     * @default false
+     */
+    hideFooter: boolean;
+    /**
+     * If `true`, the row count in pagination component in the footer is hidden.
+     * @default false
+     */
+    hideFooterRowCount: boolean;
+    /**
+     * If `true`, the pagination component in the footer is hidden but row count will be shown.
+     * @default false
+     */
+    hidePagination: boolean;
+    /**
+     * If `true`, the selected row count in the footer is hidden.
+     * @default false
+     */
+    pagination: boolean;
+    /**
+     * Pagination can be processed on the server or client-side.
+     * Set it to 'client' if you would like to handle the pagination on the client-side.
+     * Set it to 'server' if you would like to handle the pagination on the server-side.
+     * @default "client"
+     */
+    filters: FilterFieldProps[];
+    /**
+     * If `true`, the grid will have checkbox selection.
+     * @default false
+     */
+    checkboxSelection: boolean;
+    selectedRows: GridRowId[];
+    paginatedSelectedRows: GridRowId[];
+    /**
+     * If `true`, the columns will be updated with every props - Use it if the data update is real time.
+     * @default false
+     */
+    isRealTimeDataUpdate: boolean;
+    /**
+     * Bulk actions to be displayed in the toolbar.
+     * @default []
+     * @example ['delete']
+     */
+    bulkActions: string[] | any[];
+    /**
+     * Callback fired when a bulk action is clicked.
+     * @param {string} action The action clicked.
+     * @param {GridRowId[]} selectedRows The selected rows.
+     */
+    onBulkActionClick: (action: string, selectedRows: GridRowId[]) => void;
+    /**
+     * The text to be displayed when the grid is empty.
+     * @default 'No rows'
+     * @example 'No rows'
+     * @example <span>No rows</span>
+     * @example <MyEmptyPlaceholder />
+     */
+    noRowsOverlay: ReactNode | string;
+    /**
+     * The custom component to render next to search.
+     */
+    children: null | ((filteredAndSortedData: any, searchText: string, columns: any) => JSX.Element | ReactNode);
+    /**
+     * Callback fired when the page, page size, sort or sort direction is changed.
+     * @param {number} page The page selected.
+     * @param {number} pageSize The number of rows in a page.
+     * @param {string} sort The field sorted.
+     * @param {string} sortDirection The direction of the sort.
+     * @param {boolean} fetchOnPageChange If `true`, the callback is fired when the page is changed.
+     */
+    fetchOnPageChange: null | ((page: number, pageSize: number, searchText: string, sort: string, sortDirection: GridSortDirection) => void);
+    /**
+     * for paginated api as the table does not have all the data to calculate the total number of rows
+     */
+    rowsCount: null | number;
+    /**
+     *
+     * if the export is custom.
+     *
+     */
+    customExport: null | ((filteredAndSortedData: any, searchText: string, columns: any) => void);
+    /**
+     * custom placeholder for the search field.
+     */
+    searchPlaceholder: string;
+}
+type DataGridProps<R extends GridValidRowModel = any> = Partial<DataGridPropsWithDefaultValues> & {
+    pagination?: true;
+};
+
+type DataGridComponent = React$1.ForwardRefExoticComponent<DataGridProps<GridValidRowModel> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ReactTabulous: DataGridComponent;
+
+export { ColumnType, DataGridProps, DataGridPropsWithDefaultValues, FilterFieldProps, GridActionsColDef, GridBaseColDef, GridColDef, GridColumnPinningApi, GridColumnPinningInternalCache, GridColumnPinningState, GridDensity, GridPinnedColumns, GridPinnedPosition, GridRowId, GridSortDirection, GridValidRowModel, Logger, NativeColTypes, ReactTabulous };