UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 8.36 kB
1
{"version":3,"file":"Table.mjs","names":[],"sources":["../../../src/base-ui/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { type RowData, useTable } from '@tanstack/react-table';\nimport { cx } from 'antd-style';\nimport { type Key, memo, type ReactNode, useEffect, useMemo } from 'react';\n\nimport Pagination from '@/base-ui/Pagination';\nimport Spin from '@/base-ui/Spin';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { tableFeatureSet } from './features';\nimport FilterMenu from './FilterMenu';\nimport { getFixedOffsets } from './fixedOffsets';\nimport { styles } from './style';\nimport TableBody from './TableBody';\nimport TableHead from './TableHead';\nimport { toColumnDefs } from './toColumnDefs';\nimport type { FilterValue, TableColumn, TableProps } from './type';\nimport { useTableState } from './useTableState';\n\nconst EMPTY_DATA: any[] = [];\n\nexport interface TableInternalProps<T> extends TableProps<T> {\n renderFilter?: (column: TableColumn<T>, id: string, table: any) => ReactNode;\n}\n\nconst TableInner = <T extends RowData>(props: TableInternalProps<T>) => {\n const {\n bordered = false,\n className,\n classNames,\n columns,\n dataSource = EMPTY_DATA as T[],\n emptyText,\n loading = false,\n onChange,\n onRow,\n pagination,\n ref,\n renderFilter,\n rowClassName,\n rowKey,\n scroll,\n size = 'middle',\n style,\n styles: customStyles,\n tableLayout,\n } = props;\n\n const state = useTableState({ columns, onChange, pagination });\n const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);\n const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);\n\n const table = useTable({\n columns: columnDefs,\n data: dataSource,\n enableMultiSort: false,\n enableSortingRemoval: true,\n features: tableFeatureSet,\n getRowId: (record: T) =>\n String(typeof rowKey === 'function' ? rowKey(record) : (record[rowKey] as Key)),\n manualSorting: state.manualSorting,\n onColumnFiltersChange: state.onColumnFiltersChange,\n onSortingChange: state.onSortingChange,\n state: {\n columnFilters: state.columnFilters,\n sorting: state.sorting,\n },\n } as any);\n\n const allRows = table.getRowModel().rows as unknown as { id: Key; original: T }[];\n const { page } = state;\n const clientPaginated = pagination !== false && state.config?.total === undefined;\n const total = state.config?.total ?? allRows.length;\n const pageCount = Math.max(1, Math.ceil(total / page.pageSize));\n const pageIndex = Math.min(page.pageIndex, pageCount - 1);\n const rows = clientPaginated\n ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize)\n : allRows;\n\n const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n\n useEffect(() => {\n if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();\n }, [clientPaginated, pageIndex, page.pageIndex, syncClampedPage]);\n\n const minWidth = scroll?.x === 'max-content' ? '100%' : scroll?.x;\n\n return (\n <div className={cx(styles.root, className)} ref={ref} style={style}>\n <div\n className={cx(styles.wrapper, bordered && styles.bordered, classNames?.wrapper)}\n data-table-wrapper=\"\"\n style={{ maxHeight: scroll?.y, ...customStyles?.wrapper }}\n >\n <table\n className={cx(styles.table, size === 'small' ? styles.small : styles.middle)}\n style={{\n minWidth,\n tableLayout,\n width: scroll?.x === 'max-content' ? 'max-content' : '100%',\n }}\n >\n <TableHead\n classNames={classNames}\n columnIds={state.columnIds}\n columns={columns}\n fixedOffsets={fixedOffsets}\n getColumn={(id) => table.getColumn(id) as any}\n styles={customStyles}\n renderFilter={(column, id) => {\n if (renderFilter) return renderFilter(column, id, table);\n const tableColumn = table.getColumn(id) as any;\n const value = (tableColumn?.getFilterValue() as FilterValue[] | undefined) ?? [];\n return (\n <FilterMenu\n filters={column.filters ?? []}\n label={typeof column.title === 'string' ? column.title : id}\n value={value}\n onChange={(next) =>\n tableColumn?.setFilterValue(next.length > 0 ? next : undefined)\n }\n />\n );\n }}\n />\n <TableBody\n classNames={classNames}\n columnIds={state.columnIds}\n columns={columns}\n emptyText={emptyText}\n fixedOffsets={fixedOffsets}\n loading={loading}\n rowClassName={rowClassName}\n rows={rows}\n styles={customStyles}\n onRow={onRow}\n />\n </table>\n {loading && rows.length > 0 && (\n <div className={styles.loading} data-table-loading=\"\">\n <Spin />\n </div>\n )}\n </div>\n {pagination !== false && total > 0 && (\n <div className={styles.pagination}>\n <Pagination\n current={pageIndex + 1}\n pageSize={page.pageSize}\n pageSizeOptions={state.config?.pageSizeOptions}\n showSizeChanger={state.config?.showSizeChanger}\n total={total}\n onChange={(next, pageSize) =>\n state.onPaginationChange({ pageIndex: next - 1, pageSize })\n }\n />\n </div>\n )}\n </div>\n );\n};\n\nconst Table = memo(TableInner) as unknown as (<T extends RowData>(\n props: TableProps<T>,\n) => ReactNode) & {\n displayName?: string;\n};\n\nTable.displayName = 'Table';\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}