material-react-table 0.1.0 → 0.3.2

package/src/MRT_TableExpandButton.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import { Row } from 'react-table';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-// import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  row: Row<object>;
-}
-
-export const MRT_TableExpandButton: FC<Props> = ({ row }) => {
-  return (
-    <TableCell style={{ width: '2rem' }} size="small" variant="head">
-      <IconButton onClick={() => row.toggleRowExpanded()} size="small">
-        <ArrowForwardIosIcon
-          fontSize="small"
-          style={{
-            transform: row.isExpanded ? 'rotate(90deg)' : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
-  );
-};

package/src/MRT_TableFooter.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react';
-import { TableFooter } from '@mui/material';
-import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { useMaterialReactTable } from './useMaterialReactTable';
-import { MRT_TablePagination } from './MRT_TablePagination';
-
-interface Props {}
-
-export const MRT_TableFooter: FC<Props> = () => {
-  const { tableInstance, tableFooterProps, options } = useMaterialReactTable();
-
-  const hasFooterGroups = tableInstance.columns.some(
-    (c) => c.depth === 0 && !!c.Footer,
-  );
-
-  return (
-    <TableFooter {...tableFooterProps}>
-      {hasFooterGroups &&
-        tableInstance.footerGroups.map((footerGroup, index) => (
-          <MRT_TableFooterRow
-            key={`${index}-${footerGroup.id}`}
-            footerGroup={footerGroup}
-          />
-        ))}
-      {options.enablePagination === true ||
-        (['bottom', 'both'].includes(options.enablePagination.toString()) && (
-          <MRT_TablePagination />
-        ))}
-    </TableFooter>
-  );
-};

package/src/MRT_TableFooterCell.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
-
-interface Props {
-  column: HeaderGroup;
-}
-
-export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
-
-  return (
-    <TableCell
-      align={isParentHeader ? 'center' : 'left'}
-      variant="head"
-      {...column.getFooterProps()}
-    >
-      {column.render('Footer')}
-    </TableCell>
-  );
-};

package/src/MRT_TableFooterRow.tsx

@@ -1,22 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  footerGroup: HeaderGroup<object>;
-}
-
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <TableRow {...footerGroup.getFooterGroupProps()}>
-      {renderDetailPanel && <TableCell style={{ width: '2rem' }} />}
-      {footerGroup.headers.map((column, index) => (
-        <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
-      ))}
-    </TableRow>
-  );
-};

package/src/MRT_TableHead.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react';
-import { TableHead } from '@mui/material';
-import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMaterialReactTable } from './useMaterialReactTable';
-import { MRT_TablePagination } from './MRT_TablePagination';
-
-interface Props {}
-
-export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, tableHeadProps, options } = useMaterialReactTable();
-
-  return (
-    <TableHead {...tableHeadProps}>
-      {['top', 'both'].includes(options.enablePagination.toString()) && (
-        <MRT_TablePagination />
-      )}
-      {tableInstance.headerGroups.map((headerGroup, index) => (
-        <MRT_TableHeadRow
-          key={`${index}-${headerGroup.id}`}
-          headerGroup={headerGroup}
-        />
-      ))}
-    </TableHead>
-  );
-};

package/src/MRT_TableHeadCell.tsx

@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableSortLabel } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-
-interface Props {
-  column: HeaderGroup;
-}
-
-export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
-
-  return (
-    <TableCell
-      align={isParentHeader ? 'center' : 'left'}
-      style={{ fontWeight: 'bold !important' }}
-      variant="head"
-      {...column.getHeaderProps(column.getSortByToggleProps())}
-    >
-      <TableSortLabel
-        active={column.isSorted}
-        direction={column.isSortedDesc && column.isSortedDesc ? 'desc' : 'asc'}
-      >
-        {column.render('Header')}
-      </TableSortLabel>
-    </TableCell>
-  );
-};

package/src/MRT_TableHeadRow.tsx

@@ -1,22 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  headerGroup: HeaderGroup<object>;
-}
-
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <TableRow {...headerGroup.getHeaderGroupProps()}>
-      {renderDetailPanel && <TableCell style={{ width: '2rem' }} />}
-      {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell key={`${index}-${column.id}`} column={column} />
-      ))}
-    </TableRow>
-  );
-};

package/src/MRT_TablePagination.tsx

@@ -1,34 +0,0 @@
-import React, { ChangeEvent, FC } from 'react';
-import { TablePagination, TableRow } from '@mui/material';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, tablePaginationProps } = useMaterialReactTable();
-
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
-
-  return (
-    <TableRow>
-      <TablePagination
-        colSpan={tableInstance.visibleColumns.length + 10}
-        count={tableInstance.rows.length}
-        onPageChange={(_, newPage) => tableInstance.gotoPage(newPage)}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        page={tableInstance.state.pageIndex}
-        rowsPerPage={tableInstance.state.pageSize}
-        showFirstButton={
-          tableInstance.rows.length / tableInstance.state.pageSize > 2
-        }
-        showLastButton={
-          tableInstance.rows.length / tableInstance.state.pageSize > 2
-        }
-        {...tablePaginationProps}
-      />
-    </TableRow>
-  );
-};

package/src/defaults.ts

@@ -1,11 +0,0 @@
-import { MaterialReactTableOptions } from '.';
-
-export const defaultOptions: MaterialReactTableOptions = {
-  enableFilters: false,
-  enablePagination: 'bottom',
-  enableSearch: true,
-  enableSorting: true,
-  showFooter: true,
-  showHead: true,
-  showToolbar: true,
-};