amotify 0.0.2 → 0.0.4

package/src/Functions/Table/Data/parts.tsx

@@ -0,0 +1,955 @@
+import {
+  useStore,
+  React
+} from '@global';
+import {
+  Flex,
+  Box,
+  Span,
+  FAIcon
+} from '@atoms';
+import {
+  Column,
+  Row,Text
+} from '@mols';
+import {
+  Buttons,
+  Input,
+  Sheet,
+} from '@functions';
+
+import style from '../style.module.scss';
+
+import {
+  Comps,
+  DefaultCellSystemStyles,
+} from '../_';
+
+type DataTableOptionParams = {
+  tableID: string
+  componentID: string
+
+  colLength: number
+  checker: boolean
+
+  searchKeyword: string
+  filter: {
+    enabled: boolean
+    column: boolean[]
+    current: ( string[] )[]
+  }
+  order: {
+    enabled: boolean
+    column: boolean[]
+    current: amotify.fn.Tables.Data.OrderParams
+  }
+  paging: {
+    rowLength: number
+    pageLength: number
+    currentPageIndex: number
+  }
+  head: amotify.fn.Tables.Data.HeadRowParams
+  rows: amotify.fn.Tables.Data.BodyRowParams[]
+
+  noRecords: ReactElement
+  cellStyles?: amotifyUniStyleParams
+  cellClassName?: string
+  cellStylesCallback?: {
+    ( params: amotify.fn.Tables.StylesCallbackInput ): amotifyUniStyleParams
+  }
+  onRowClick?: amotify.fn.Tables.OnRowClick
+}
+
+const Components = {
+  __memoryID: $.uuidGen(),
+  Header: ( params: {
+    val_status: DataTableOptionParams
+    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
+
+    KeywordFilterRows: amotify.fn.Tables.Data.BodyRowParams[]
+  } ) => {
+    let {
+      val_status,
+      set_status,
+
+      KeywordFilterRows
+    } = { ...params };
+
+    let {
+      order,
+      filter
+    } = val_status;
+    let [ orderIndex,orderDirection ] = order.current;
+
+    let Cols = [];
+
+    let HEAD = [ ...val_status.head ];
+    if ( val_status.checker ) {
+      Cols.push( <Comps.TH
+        { ...val_status.cellStyles }
+        fontWeight='2.normal'
+        position='sticky'
+        top={ 0 }
+        unitWidth={ 4 }
+        padding={ 0 }
+        { ...DefaultCellSystemStyles( {
+          top: true,
+          bottom: !val_status.rows.length,
+          left: true,
+          right: !val_status.colLength
+        } ) }
+        { ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
+          top: true,
+          bottom: !val_status.rows.length,
+          left: true,
+          right: !val_status.colLength,
+          rowIndex: 0,
+          colIndex: 0,
+          isBody: false,
+          isHeader: true
+        } ) : {} }
+        className={ [
+          style.Cell,
+          val_status.cellClassName
+        ].join( ' ' ) }
+        freeCSS={ {
+          zIndex: 2
+        } }
+      >
+        <Box flexCenter>
+          <Input.Checker
+            label={ null }
+            value={ false }
+            onUpdateValidValue={ ( { value } ) => {
+              let newRows = val_status.rows;
+              newRows.forEach( ( rows ) => {
+                rows.checked = value;
+              } );
+              set_status( {
+                ...val_status,
+                rows: newRows
+              } )
+            } }
+          />
+        </Box>
+      </Comps.TH> );
+    }
+
+    for ( let colIndex = 0; colIndex < val_status.colLength; colIndex++ ) {
+      let col = HEAD[ colIndex ];
+      if ( !col ) continue;
+
+      let DisplayLabel = col.children || col.data;
+
+      let orderable = order.enabled && order.column[ colIndex ];
+      let filterable = filter.enabled && filter.column[ colIndex ];
+
+      let OrderButton = orderable ? <FAIcon
+        fontSize={ '1.mini' }
+        fontColor={ colIndex == orderIndex ? '1.clear' : '5.translucent' }
+        d={ colIndex == orderIndex
+          ? 'arrow-' + [ 'up','down' ][ Number( orderDirection == 'DESC' ) ]
+          : 'arrow-down-arrow-up' }
+      /> : null;
+
+      let FilterButton = <></>;
+      if ( filterable ) {
+        let ColumnDatas = KeywordFilterRows.map( ( row ) => {
+          return row[ colIndex ]?.data;
+        } );
+        ColumnDatas = [ ... new Set( ColumnDatas ) ].order( {
+          direction: 'ASC',
+        } );
+        let filterList: any = filter.current[ colIndex ];
+
+        if ( filterList ) {
+          let ValueList = ColumnDatas.filter( ( data ) => !filterList.includes( data ) );
+          let SelectList: amotify.fn.Input.List.OptionParams[] = [];
+          ColumnDatas.forEach( ( data ) => {
+            if ( !data ) return;
+            SelectList.push( {
+              value: data,
+              label: <Box
+                flexSizing={ 'auto' }
+              >
+                { data }
+              </Box>
+            } );
+          } );
+
+          let FilterModaButtonID = 'BUTTON-' + val_status.componentID + '-' + colIndex;
+          let FilterSheetID = val_status.componentID + '-' + colIndex;
+
+          let SheetParams: amotify.fn.Sheet.Params = {
+            sheetID: FilterSheetID,
+            parent: '#' + FilterModaButtonID,
+            gravityPoint: 23,
+            type: 'custom',
+            content: <Flex
+              flexType='col'
+              border
+              boxShadow={ 3 }
+              backgroundColor={ '1.layer.base' }
+              borderRadius={ 1 }
+              freeCSS={ {
+                minWidth: 12 * 20,
+                maxWidth: 12 * 30
+              } }
+            >
+              <Column
+                gap={ '1/3' }
+                overflow={ 'auto' }
+                padding={ '2/3' }
+                freeCSS={ {
+                  maxHeight: 12 * 30
+                } }
+              >
+                <Input.Checkbox
+                  tone='cloud'
+                  icon
+                  value={ ValueList }
+                  display='flex'
+                  gap={ '1/2' }
+                  override='force'
+                  options={ SelectList }
+                  hideInput
+                  name={ 'DTFilter-col-' + colIndex + '-table-' + val_status.componentID }
+                  cellStyles={ {
+                    flexSizing: 'auto',
+                    padding: '2/3'
+                  } }
+                  onUpdateValidValue={ ( { value } ) => {
+                    let DropValues = ColumnDatas.filter( ( data ) => !value.includes( data ) );
+                    let newOptions = { ...val_status }
+                    newOptions.filter.current[ colIndex ] = DropValues as string[];
+
+                    set_status( newOptions );
+                  } }
+                />
+              </Column>
+              <Row.Separate
+                gap={ '2/3' }
+                padding={ '2/3' }
+                horizontalAlign='right'
+              >
+                <Buttons.Button.Border.S
+                  isRounded
+                  onClick={ () => {
+                    Sheet.close( FilterSheetID );
+                  } }
+                >
+                  閉じる
+                </Buttons.Button.Border.S>
+                <Buttons.Button.Prime.S
+                  color='theme'
+                  isRounded
+                  ssEffectsOnActive='shrink'
+                  onClick={ () => {
+                    let newFilterList = [] as string[];
+                    if ( !filterList.length ) newFilterList = ColumnDatas as string[];
+
+                    let newOptions = { ...val_status }
+                    newOptions.filter.current[ colIndex ] = newFilterList;
+
+                    set_status( newOptions );
+                  } }
+                >
+                  全選択
+                </Buttons.Button.Prime.S>
+              </Row.Separate>
+            </Flex>
+          }
+
+          Sheet.refresh( SheetParams,true );
+
+          FilterButton = <Box className={ style.FilterRegion }>
+            <Buttons.Button.Sub.S
+              ssSphere={ 2.5 }
+              fontSize={ '1.mini' }
+              className={ style[ 'Filtering_' + !!filterList.length ] }
+              id={ FilterModaButtonID }
+              children={ <FAIcon
+                d='bars-filter'
+              /> }
+              onClick={ ( event ) => {
+                event.stopPropagation();
+                Sheet.open( SheetParams );
+              } }
+            />
+          </Box>
+        }
+      }
+
+      col = {
+        ...val_status.cellStyles,
+        ...col,
+        ...DefaultCellSystemStyles( {
+          top: true,
+          bottom: !val_status.rows.length,
+          left: colIndex == Number( val_status.checker ),
+          right: colIndex == val_status.colLength - 1
+        } ),
+        ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
+          top: true,
+          bottom: !val_status.rows.length,
+          left: colIndex == Number( val_status.checker ),
+          right: colIndex == val_status.colLength - 1,
+          rowIndex: 0,
+          colIndex,
+          isBody: false,
+          isHeader: true
+        } ) : {},
+        ssPushable: orderable,
+        className: [
+          style.Cell,
+          val_status.cellClassName,
+          col.className
+        ].join( ' ' )
+      }
+
+      Cols.push( <Comps.TH
+        fontWeight='2.normal'
+        position='sticky'
+        top={ 0 }
+        { ...col }
+        freeCSS={ {
+          zIndex: 2,
+          ...col.freeCSS
+        } }
+        onClick={ ( event ) => {
+          if ( orderable ) {
+            let newOptions = { ...val_status }
+            newOptions.order.current = [ colIndex,orderIndex === colIndex && orderDirection == 'ASC' ? 'DESC' : 'ASC' ];
+            set_status( newOptions );
+          }
+        } }
+      >
+        <Flex
+          flexType='row-r'
+          flexWrap={ false }
+          height={ 1 }
+          borderRadius='inherit'
+          flexCenter
+        >
+          { FilterButton }
+          <Flex
+            flexSizing={ 0 }
+            position='relative'
+            borderRadius='inherit'
+            gap={ '1/3' }
+            flexWrap={ false }
+            horizontalAlign='center'
+          >
+            { DisplayLabel }
+            { OrderButton }
+          </Flex>
+        </Flex>
+      </Comps.TH> );
+    }
+
+    return ( <Comps.Row
+      className={ [ style.Row,style.HeadRow ].join( ' ' ) }
+      children={ Cols }
+    /> );
+  },
+  Body: ( params: {
+    val_status: DataTableOptionParams
+    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
+    PageRows: amotify.fn.Tables.Data.BodyRowParams[]
+  } ) => {
+    let {
+      val_status,
+      PageRows
+    } = params;
+
+    let BodyRows: ReactElement[] = [];
+    PageRows.forEach( ( row,rowIndex ) => {
+      let ROW = [ ...row ];
+      let Cols: ReactElement[] = [];
+
+      if ( val_status.checker ) {
+        Cols.push( <Comps.TH
+          unitWidth={ 4 }
+          padding={ 0 }
+          borderRight
+          { ...val_status.cellStyles }
+          { ...DefaultCellSystemStyles( {
+            top: rowIndex == 0 && !val_status.head,
+            bottom: rowIndex == PageRows.length - 1,
+            left: true,
+            right: !val_status.colLength
+          } ) }
+          { ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
+            top: rowIndex == 0 && !val_status.head,
+            bottom: rowIndex == PageRows.length - 1,
+            left: true,
+            right: !val_status.colLength,
+            rowIndex,
+            colIndex: 0,
+            isBody: true,
+            isHeader: false
+          } ) : {} }
+          className={ [
+            style.Cell,
+            val_status.cellClassName
+          ].join( ' ' ) }
+        >
+          <Box flexCenter>
+            <Input.Checker
+              label={ null }
+              value={ row.checked }
+              override='force'
+              onUpdateValidValue={ ( { value } ) => {
+                let newRows = val_status.rows;
+                newRows[ rowIndex ].checked = value;
+                params.set_status( {
+                  ...val_status,
+                  rows: newRows
+                } );
+              } }
+            />
+          </Box>
+        </Comps.TH> );
+      }
+
+      ROW.forEach( ( col,colIndex ) => {
+        if ( !col ) return;
+        let {
+          type = 'td',
+          ...Params
+        } = col;
+
+        Params = {
+          ...val_status.cellStyles,
+          ...Params,
+          ...DefaultCellSystemStyles( {
+            top: rowIndex == 0 && !val_status.head,
+            bottom: rowIndex == PageRows.length - 1,
+            left: val_status.checker ? false : colIndex == 0,
+            right: colIndex == val_status.colLength - 1
+          } ),
+          ...val_status.cellStylesCallback ? val_status.cellStylesCallback( {
+            top: rowIndex == 0 && !val_status.head,
+            bottom: rowIndex == PageRows.length - 1,
+            left: val_status.checker ? false : colIndex == 0,
+            right: colIndex == val_status.colLength - 1,
+            rowIndex,
+            colIndex,
+            isBody: true,
+            isHeader: false
+          } ) : {},
+          className: [
+            style.Cell,
+            val_status.cellClassName,
+            Params.className
+          ].join( ' ' )
+        }
+
+        let Cell = Comps[ type == 'td' ? 'TD' : 'TH' ];
+        Cols.push( <Cell
+          key={ colIndex }
+          { ...Params } /> );
+      } );
+
+      BodyRows.push( <Comps.Row
+        key={ rowIndex }
+        className={ [ style.Row,style.BodyRow ].join( ' ' ) }
+        children={ Cols }
+        onClick={ ( event ) => {
+          if ( !val_status.onRowClick ) return;
+          val_status.onRowClick( JSON.parse( row.rowID ) as any,event );
+        } }
+      /> );
+    } );
+
+    if ( !PageRows.length ) {
+      let Content = <Box
+        padding={ 2 }
+        fontColor={ '4.thin' }
+        freeCSS={ {
+          textAlign: 'center'
+        } }
+        borderTop='1.thin'
+        children={ 'テーブルがありません' }
+      />;
+      if ( val_status.noRecords ) {
+        Content = <>
+          { val_status.noRecords }
+        </>;
+      }
+
+      BodyRows.push( <Comps.Row
+        key={ 'dataNotFound' }
+        className={ [
+          style.Row,
+          style.BodyRow,
+          style.DataNotFound
+        ].join( ' ' ) }
+      >
+        <Comps.TD
+          colSpan={ val_status.colLength }
+          className={ style.Cell }
+        >
+          { Content }
+        </Comps.TD>
+      </Comps.Row> );
+    }
+    return ( <>{ BodyRows }</> );
+  },
+  Core: ( params: {
+    val_status: DataTableOptionParams
+    set_status: React.Dispatch<React.SetStateAction<DataTableOptionParams>>
+  } ) => {
+    let {
+      val_status,
+      set_status
+    } = params;
+
+    let {
+      searchKeyword,
+      filter,
+      order,
+      paging
+    } = val_status;
+
+    let MotherRows = [ ...val_status.rows ];
+    let KeywordFilterRows = [ ...val_status.rows ];
+    let FilterRows = [ ...val_status.rows ];
+    let PageRows = [ ...val_status.rows ];
+
+    if ( searchKeyword ) {
+      KeywordFilterRows = MotherRows.filter( ( row ) => {
+        if ( ( row.__sys4SearchKey || '' ).match( new RegExp( searchKeyword,'i' ) ) ) return 1;
+        return 0;
+      } );
+      FilterRows = [ ...KeywordFilterRows ];
+      PageRows = [ ...KeywordFilterRows ];
+    }
+    if ( filter.enabled ) {
+      for ( let i = 0; i < val_status.colLength; i++ ) {
+        let enabled = filter.column[ i ];
+        let current = filter.current[ i ];
+
+        if ( enabled && current && current.length ) {
+          FilterRows = FilterRows.filter( ( row ) => !current.includes( row[ i ].data as string ) );
+          PageRows = [ ...FilterRows ];
+        }
+      }
+    }
+    if ( order.enabled ) {
+      FilterRows = FilterRows.order( {
+        direction: order.current[ 1 ],
+        keys: [
+          order.current[ 0 ],
+          'orderIndex'
+        ]
+      } );
+      PageRows = [ ...FilterRows ];
+    }
+
+    {
+      let {
+        currentPageIndex,
+        rowLength
+      } = paging;
+      PageRows = [ ...PageRows ].splice( ( currentPageIndex - 1 ) * rowLength,rowLength );
+    }
+
+    let tableObjectID = Components.__memoryID + '_' + val_status.tableID;
+
+    let useStatusOutput: amotify.fn.Tables.Data.useStatusOutput = {
+      tableComponentDidMount: true,
+      totalRows: MotherRows.length,
+      pageRows: PageRows.length,
+      filteredRows: FilterRows.length,
+
+      filter: val_status.filter,
+      order: val_status.order,
+      paging: val_status.paging,
+      searchKeyword: val_status.searchKeyword,
+    }
+    useStore.update( {
+      key: tableObjectID,
+      value: {
+        status: useStatusOutput,
+        updatePageIndex: ( index: number ) => {
+          let Index = Math.min( Math.max( 1,index ),val_status.paging.pageLength );
+          let newOptions = { ...val_status }
+          newOptions.paging.currentPageIndex = Index;
+          set_status( newOptions );
+        },
+        updateRowLength: ( index: number ) => {
+          let newOptions = { ...val_status }
+          newOptions.paging = {
+            rowLength: index,
+            currentPageIndex: 1,
+            pageLength: Math.ceil( FilterRows.length / index )
+          }
+          set_status( newOptions );
+        },
+        updateKeyword: ( keyword: string ) => {
+          $.interval.clear( 'InputSearchTime' );
+          $.interval.standBy( 'InputSearchTime',200,() => {
+            let newOptions = { ...val_status }
+
+            newOptions.searchKeyword = keyword;
+            newOptions.paging.currentPageIndex = 1;
+            newOptions.filter.current = newOptions.filter.current.map( () => [] );
+
+            set_status( newOptions );
+          } );
+        },
+        getRowData: () => {
+          let ReturnRows = [ ...MotherRows ];
+
+          if ( order.enabled ) {
+            ReturnRows = ReturnRows.order( {
+              direction: order.current[ 1 ],
+              keys: [
+                order.current[ 0 ],
+                'orderIndex'
+              ]
+            } );
+          }
+
+          ReturnRows.forEach( ( row ) => {
+            row.currentPage = false;
+            row.filtered = false;
+            // row.checked = val_checked[ row.rowID! ];
+          } )
+          PageRows.forEach( ( row ) => {
+            let { rowID } = row;
+            ReturnRows.find( ( row ) => row.rowID == rowID )!.currentPage = true;
+          } );
+          FilterRows.forEach( ( row ) => {
+            let { rowID } = row;
+            ReturnRows.find( ( row ) => row.rowID == rowID )!.filtered = true;
+          } );
+          return ReturnRows;
+        }
+      }
+    } );
+
+    React.useEffect( () => {
+      let Propagations = Components.Propagations[ val_status.tableID ] || [];
+      Object.keys( Propagations ).forEach( ( key ) => {
+        let propagationObject = useStore.get( key );
+        if ( !propagationObject?.refresh ) return;
+        propagationObject.refresh();
+      } );
+    } );
+
+    return ( <>
+      <Box
+        className={ style.TableBase }
+      >
+        <Comps.Table className={ style.Table }>
+          <Components.Header
+            val_status={ val_status }
+            set_status={ set_status }
+            KeywordFilterRows={ KeywordFilterRows }
+          />
+          <Components.Body
+            val_status={ val_status }
+            set_status={ set_status }
+            PageRows={ PageRows }
+          />
+        </Comps.Table>
+      </Box>
+    </> );
+  },
+  Propagations: {} as any,
+
+  DataLeveler: ( params: amotify.fn.Tables.Data.Params ) => {
+    params.filter = params.filter ?? false;
+    params.filter = Array.from( { length: params.colLength } ).map( ( a,index ) => {
+      if ( $.is.boolean( params.filter ) ) {
+        return params.filter;
+      }
+      return ( params.filter as boolean[] )![ index ] ?? false;
+    } );
+
+    params.order = params.order ?? true;
+    params.order = Array.from( { length: params.colLength } ).map( ( a,index ) => {
+      if ( $.is.boolean( params.order ) ) {
+        return params.order;
+      }
+      return ( params.order as boolean[] )![ index ] ?? true;
+    } );
+
+    params = {
+      checker: false,
+      searchKeyword: '',
+      filter: false,
+      order: true,
+      defaultOrder: [ 0,'ASC' ],
+      ...params
+    }
+    params.rows.forEach( ( row,rowIndex ) => {
+      row.rowID = JSON.stringify( row.rowID || rowIndex );
+      let __sys4SearchKey: string[] = [];
+      row.forEach( ( col,colIndex ) => {
+        let {
+          data,
+          children,
+          orderIndex
+        } = col;
+        col.orderIndex = $.is.exist( orderIndex ) ? String( orderIndex ) : String( data );
+        col.children = children || String( data );
+        __sys4SearchKey.push( String( col.data ) );
+      } );
+      row.__sys4SearchKey = __sys4SearchKey.join( '/;' );
+    } );
+    return ( <Components.StateManager
+      eventID={ $.uuidGen() }
+      { ...params }
+    /> );
+  },
+  StateManager: ( params: amotify.fn.Tables.Data.Params ) => {
+    let {
+      colLength,
+      eventID,
+      checker = false,
+      searchKeyword = '',
+      filter,
+      order,
+      defaultOrder = [ 0,'ASC' ] as amotify.fn.Tables.Data.OrderParams,
+      pageRowLength = 30
+    } = params;
+    let [ val_componentID ] = React.useState( $.uuidGen() );
+
+    let DefStatus: DataTableOptionParams = {
+      tableID: params.tableID || val_componentID,
+      componentID: val_componentID,
+      colLength,
+      checker,
+      searchKeyword: searchKeyword,
+      filter: {
+        enabled: filter !== false,
+        column: filter as boolean[],
+        current: Array.from( { length: colLength },() => [] )
+      },
+      order: {
+        enabled: order !== false,
+        column: order as boolean[],
+        current: defaultOrder
+      },
+      paging: {
+        rowLength: pageRowLength,
+        pageLength: Math.ceil( params.rows.length / pageRowLength ),
+        currentPageIndex: 1
+      },
+      head: params.head,
+      rows: params.rows,
+      noRecords: params.noRecords,
+      cellStyles: params.cellStyles || {},
+      cellClassName: params.cellClassName || '',
+      cellStylesCallback: params.cellStylesCallback,
+      onRowClick: params.onRowClick,
+    }
+    let [ val_status,set_status ] = React.useState( DefStatus );
+
+    let [ val_eventID,set_eventID ] = React.useState( params.eventID );
+    if ( val_eventID != params.eventID ) {
+      set_eventID( params.eventID );
+      set_status( DefStatus );
+    }
+
+    return ( <Components.Core
+      val_status={ val_status }
+      set_status={ set_status }
+    /> );
+  }
+}
+
+export const DataFNs: amotify.fn.Tables.Data.FNs = {
+  __memoryID: Components.__memoryID,
+  useStatus: ( tableID ) => {
+    let [ val_statusID ] = React.useState( $.uuidGen() );
+    let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
+
+    let tableObjectID = Components.__memoryID + '_' + tableID;
+    React.useEffect( () => {
+      Components.Propagations[ tableID ] = {
+        ...Components.Propagations[ tableID ],
+        [ val_statusID ]: 1
+      }
+      useStore.set( {
+        key: val_statusID,
+        value: {
+          refresh: () => {
+            set_refresh( $.uuidGen() );
+          }
+        }
+      } );
+
+      return () => {
+        delete Components.Propagations[ tableID ][ val_statusID ];
+      }
+    },[] );
+
+    return useStore.get( tableObjectID )?.status || {
+      tableComponentDidMount: false
+    };
+  },
+  getRowData: ( tableID ) => {
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
+    if ( !tableObject?.getRowData ) return;
+    return tableObject.getRowData();
+  },
+  setPageIndex: ( tableID,pageIndex ) => {
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
+    if ( !tableObject?.updatePageIndex ) return;
+    tableObject.updatePageIndex( pageIndex );
+  },
+  setRowLength: ( tableID,rowLength ) => {
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
+    if ( !tableObject?.updateRowLength ) return;
+    tableObject.updateRowLength( rowLength );
+  },
+  setSearchKeyword: ( tableID,keyword ) => {
+    let tableObject = useStore.get( Components.__memoryID + '_' + tableID );
+    if ( !tableObject?.updateKeyword ) return;
+    tableObject.updateKeyword( keyword );
+  },
+}
+export const DataComps: amotify.fn.Tables.Data.Comps = {
+  SearchInput: ( params ) => {
+    let status = DataFNs.useStatus( params.tableID );
+    if ( !status.tableComponentDidMount ) return ( null );
+
+    return ( <Input.Text.Normal
+      placeholder='検索...'
+      clearButton
+      padding={ '2/3' }
+      paddingRight={ 3 }
+      rightIcon={ <Input.Comps.RightIcon
+        fontColor={ '5.translucent' }
+        right={ '2/3' }
+      >
+        <FAIcon.Search />
+      </Input.Comps.RightIcon> }
+      override='force'
+      value={ status.searchKeyword }
+      onUpdateValidValue={ ( { value } ) => {
+        DataFNs.setSearchKeyword( params.tableID,value );
+      } }
+    /> );
+  },
+  Info: ( params ) => {
+    let status = DataFNs.useStatus( params.tableID );
+    if ( !status.tableComponentDidMount ) return ( null );
+    let Ratio = status.filteredRows.ratio( status.totalRows ) || 0;
+
+    return ( <Flex
+      verticalAlign='baseline'
+      gap={ '1/2' }
+      fontSize='1.mini'
+      fontColor='3.blur'
+    >
+      <Span
+        fontSize='4.thirdTitle'
+        fontColor='theme'
+      >
+        { status.filteredRows.toLocaleString() }
+      </Span>
+      / { status.totalRows.toLocaleString() }件 ({ Ratio }%)
+    </Flex> );
+  },
+  Paging: ( params ) => {
+    let status = DataFNs.useStatus( params.tableID );
+    if ( !status.tableComponentDidMount ) return ( null );
+
+    let PageSelect: amotify.fn.Input.Select.OptionProps[] = [];
+    for ( let index = 0; index < status.paging.pageLength; index++ ) {
+      PageSelect.push( { value: index + 1,label: ( index + 1 ).toString() } );
+    }
+
+    return ( <Row.Center>
+      <Row.Center
+        gap={ '1/2' }
+      >
+        ページ :
+        <Input.Select
+          enableUnSelected={ false }
+          padding={ [ '1/3','2/3' ] }
+          rightIcon={ false }
+          placeholder=''
+          override='force'
+          value={ status.paging.currentPageIndex }
+          options={ PageSelect }
+          onUpdateValidValue={ ( { value } ) => {
+            DataFNs.setPageIndex( params.tableID,value );
+          } }
+        />
+        / { status.paging.pageLength }
+      </Row.Center>
+      <Row.Right gap={ '1/2' }>
+        <Buttons.Button.Sub.R
+          ssSphere={ 3 }
+          onClick={ () => {
+            if ( status.paging.currentPageIndex == 1 ) {
+              DataFNs.setPageIndex( params.tableID,status.paging.pageLength );
+              return;
+            }
+            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex - 1 );
+          } }
+        >
+          <FAIcon.ChevronLeft />
+        </Buttons.Button.Sub.R>
+        <Buttons.Button.Sub.R
+          ssSphere={ 3 }
+          onClick={ () => {
+            if ( status.paging.currentPageIndex == status.paging.pageLength ) {
+              DataFNs.setPageIndex( params.tableID,1 );
+              return;
+            }
+            DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex + 1 );
+          } }
+        >
+          <FAIcon.ChevronRight />
+        </Buttons.Button.Sub.R>
+      </Row.Right>
+    </Row.Center> );
+  },
+  RowLength: ( params ) => {
+    let status = DataFNs.useStatus( params.tableID );
+    if ( !status.tableComponentDidMount ) return ( null );
+
+    let currentLength = status.paging.rowLength;
+    let ExistCurrentLength = 0;
+    let LengthList: amotify.fn.Input.Select.OptionProps[] = params.lengthSelect.map( ( l ) => {
+      ExistCurrentLength |= Number( l == currentLength );
+
+      return { value: l,label: l.toString() }
+    } );
+    if ( !ExistCurrentLength ) {
+      LengthList.push( { value: currentLength,label: currentLength.toString() } );
+    }
+
+    LengthList = LengthList.order( {
+      direction: 'ASC',
+      keys: [ 'value' ],
+    } );
+
+    return ( <Row.Center
+      gap={ '1/2' }
+    >
+      件数 :
+      <Input.Select
+        enableUnSelected={ false }
+        rightIcon={ false }
+        placeholder='選択'
+        override='force'
+        padding={ [ '1/3','2/3' ] }
+        value={ status.paging.rowLength }
+        options={ LengthList }
+        onUpdateValidValue={ ( { value } ) => {
+          DataFNs.setRowLength( params.tableID,value );
+        } }
+      />
+    </Row.Center> );
+  },
+}
+
+export const DataTable = ( params: amotify.fn.Tables.Data.Params ) => ( <Components.DataLeveler{ ...params } /> );